And the answer, of course, is both yes and no. You can calculate exactly how much it cost you to create this thing, but then you’ll still have to decide what your time is worth, and what the art is worth to you. And those are much harder to quantify because we humans tend to undervalue our time and because we artists tend to pour too much of our souls into our work.

I think the most expensive piece I saw at one of our senior art shows was something like $200,000. My friends and I were astonished, and at the time we joked that maybe it was a typo (it wasn’t). In retrospect I think she just marked it up because she didn’t want to let it go, and I have to wonder how much of her was hidden in those brush strokes.

I wonder how much of myself ends up in the things I create. I wonder, constantly, if I’m attributing too much or too little value to my time. I had been with Portent for more than three years when I started discussing time estimates with a colleague, and I told him how much I would quote for a project and his first response was, ‘Wow.’ I immediately wanted to backtrack – I was convinced that it was too much time, that I was much too slow, and then he said, ‘I would have said at least twice that.’

I had no idea what to do with that information. I’ve been thinking about it a lot lately, and about process, and about how tight deadlines tend to be. About the idea that good communication can change the world, and what it takes to create something truly valuable – if that’s even possible when the definition of ‘value’ tends to be relative.

In my experience, more value comes from collaboration than anything else, so I want to open this discussion up, look at what it takes to get from start to finish on a creative project (specifically, the design or redesign of a website), and talk to you, dear reader, about how this process can get better, and bring real value to more people.

The Kickoff Meeting

Players: copywriter, designer, developer, UX architect, art director, project manager

In the beginning, there is a brainstorm. In grade school they taught us to do this by writing words in little circles and connecting them to other word circles and branching out until you have a complex thought. In college, they gave us a few hours of studio time to do research and bounce ideas and come back with the beginnings of a plan. It didn’t need to be fully fleshed out, we just had to present some idea of what we’d be doing for the next few weeks, whether that was a sketch or something still too abstract to put on paper.

In a marketing company, this means getting everyone who’s going to be creating something for the project – structure, content, art, code, etc – in a room and coming to a consensus on what the project’s goals are. Are we informing people? Are we inspiring them? Do we need them to take the time to share their thoughts with us, or do we only need them to click a button? How do we make this a positive experience for them?

The brainstorm should give everyone a clear idea of where they’re going, so that the designer can do competitive research and start building a mood board, the UX can begin working on wireframes and site architecture, and the copywriter can begin drafting the voice. There should be check-ins for these things, even if it’s just a couple minutes, to keep everyone on the same page, so that the team can take something like this:

And turn it into something like this:

The Design

Players: designer, art director, project manager

Once the wire frames are approved and the first round of copy has been coaxed into existence, the design starts to form. I worked on a refresh for a hotel site recently and long before we officially got started I was gathering travel apps, brochures, hotel and resort websites – anything that I could get that was beautiful or functional or (preferably) both – to inspire my work. Because of this, by the time I get to the design stage I usually already have a couple sketches or ideas that I want to try, and a solid idea of the style I want to go with. There’s that old adage; good artists borrow, great artists steal. I keep my stolen hoard of good design on Pinterest, as a sort of digital mood board that I can return to frequently while I work.

When I was fresh out of college, my design process (much like my meeting-new-people process) mostly involved sitting alone, not speaking to anyone, and eventually emailing someone a jpeg to look at with an email signature that just said ‘thanks’ though I’m not really sure what I was thanking them for. Their time, I suppose.

I’ve come a long way since then. Today, my design process involves a lot of bass-heavy music and regular critiques with colleagues, which sometimes last less than a minute and sometimes turn into group discussions of functionality, color theory, typography, and best practices for UX and SEO. We no longer email jpegs to people, instead we create presentations, whether that’s a PDF deck or an interactive prototype of the website we want to build.

While creating a comp, I also create all of the hover and on-click states for the page I’m designing, and when we get the necessary internal approval to move forward with presenting the design to the client, I start prototyping it. The tool we use here at Portent is InVision, which recently came out with some pretty excellent mobile updates that allow you to prototype your responsive designs as well. This enables the client to view your work the way they’ll see it once it’s developed.

This is especially useful when we can present in person or over screenshare, so that we can expand on the logic behind our choices, describe what the color palette is meant to convey, the energy the design is supposed to elicit, the interactions the users will experience, and if there are animations, how and why they’re there. The client can discuss the design, express concerns, and ask questions while they’ve got the full attention of their Portent team.

Bringing it to Life

Players: designer, copywriter, developer, project manager

A development environment has to be set up. The developer can (and should) work locally at first, but at some point they’ll need server space to host the fledgling site. Then, if it’s being passed off to the client for them to manage content after launch, it’ll need a content management system. The content needs to be edited and finalized, if it hasn’t been already. If there’s no imagery, the designer will need to source some from stock photography sites, which is a time-consuming process if you want quality images. If there is imagery, some (if not most, or all) of it will probably need to be resized to suit the new design.

The developer has to slice up the designs and convert them to HTML/CSS/JS – at which point they are going to desperately hope  that whoever created the design file organized their layers and clearly labeled all the hover states and interactions. Once the HTML mockups are done, the reusable elements (menus, headers, footers, etc) need to be separated out to create a template system that can be integrated into the client’s CMS.

Before launch, the scripts and images need to be compressed, and the images and content need to get entered into the client’s database. If the structure of the site has changed, 301 redirects will have to be implemented for pages that no longer exist or have moved, and incorrect links need to be removed from all onsite content. SEO, Social, and UX need to make a final sweep of the site and provide recommendations of changes that should be made before launch. The site needs to be tested across several browsers and platforms – there are tools for this, like BrowserStack, but it’s always a good idea to use actual devices as well. Bugs have to be logged and fixed and finally, when everything is done, launching will hopefully be as easy as switching the URL over, running a broken link report and testing everything. Twice.

Every site launch is its own brand of challenging, and we should always be looking for ways to make that process better. Working on the internet, and particularly in communications, allows us to improve the world around us faster, so long as we always aim to create something that can be objectively considered valuable.

So how do you get through launching a site with your sanity intact and make sure that you have dotted and crossed everything put in front of you to dot and cross? How do you make sure that the things you create are worthy of the time and soul that you give them?

The post Creative Process: Where Does All the Time Go? appeared first on Portent.

That’s why we have full bands and, furthermore, the production and management crew that all help make a spectacular show possible. Portent is the same. Our strong team works together to provide our clients with fantastic full service that keeps them coming back for more!

As mentioned earlier, you can impress with a single display of amazing talent. However, with the right people alongside you, something greater can emerge and possibly go supernova! This doesn’t just apply to concerts and Portent. Everyone can benefit from solid teamwork.

The Band Members

The Front Man (or Woman)

The lead guitarist or singer is usually the first to be recognized or remembered in a typical rock band. These members are generally the “front man” who serves as the face and voice of the band.

Without a front man, there is an uncomfortable amount of room for a chance at a PR nightmare. Kind of sounds like an Account Manager, right?

We rely on Account Managers to clearly express who we are and what we’re doing for current and potential clients (who’re practically the audience).

The Drummer

When I ask non-musician friends what comes to mind when they think of rock drummers the response is often along the lines of “frantic people with sticks”. This is partially true.
While it may seem that drummers are just banging on drums and making noise, from experience I can tell you they are really the key to keeping in time and are crucial when it comes to determining where you are in a song.

Like the drummer, Project Managers are (while doing four things at once) keeping everyone at a steady pace.

The Producers and Accompaniment

Big bands often hire a very reputable producer or songwriter. It would be very overwhelming for any one person to write music for each instrument, the lyrics, and focus on mastering your part while teaching others. That is, unless they were already a master at their creative craft. That’s where these specialists come in.

They create the music for the band to perform for the audience. There are numerous famous bands out there that would cease to exist if it weren’t for their producers. There are, however, a good number of songwriters who still perform out there. That’s the kind of talent our subject matter experts have.

Whether it’s our PPC, SEO, or Content team, we’d be at a complete loss without them. Not only do we have them produce brilliant work, but they also act as consultants both to us and to our clients.

Band or business, there’d be nothing for anyone to do if there’s no substance or strategy to work with.

The Stage Production

Even if the music is great, it doesn’t necessarily mean that the show is going to be great. That’s where stage production comes into play. The stage production crew consists of artists, engineers, and directors who all work to incorporate a spectacular display and atmosphere in tandem with musicians. These range from light shows and motion graphics to stage props and costumes. This provides great assistance to the image and persona of the band.

Our Creative team is comprised of talented artists, engineers, and directors who specialize in a variety of trades and services. Just look at the Portent website, it’s pretty snazzy. When our clients need something that “wows” their target audiences, we have faith in our Creative team to do just that and more.

The Managers

Sometimes, being a master of your own craft is not enough to successfully turn it into a business. This is why we have managers. Gigs, budgets, and the big picture are what they provide their bands. Imagine what a manager could do if they were also experts in performing music. They’d be able to keep everyone on track with the long term goals and offer guidance.

We don’t have to imagine. Our leadership team consists of some of the most knowledgeable professionals in their industry. At the end of the day, they are the ones credited with keeping the band a cohesive unit.

The PR

Need to get word out about a new album? Want to make sure as many people as possible know about your book? Get PR on the line. These folks excel at the right kind of marketing, reputation, and public awareness. The results are bigger crowds, more sales, and more recommendations.

We have people who do that for us through means of social media with superb outreach. I present our social media team! Sure, Facebook is a product that millions of people know how to use, but how many people truly know the ins and outs and how that affects business? I can name a few off the top of my head because I see those folks here at Portent. I have personally learned how much more intricate social media can really be after speaking to the experts here. It goes beyond the stage AND the page.

The Roadies

Last but not least, I’d like to talk about what I believe relates closest to what I do here at portent. In all my time that I’ve performed as a guitarist, I was really lucky to have a roadie for a couple of months. Roadies are the backstage people who prepare things for the performers. These things include setting up the gear, assisting the sound and light masters, and providing support to the performers so they may rock the crowd as best as they can.

That’s where I come in. Whether it’s project support, technical support, or building a tool that can help background tasks running more efficiently. Although I’m not standing in the lime light, I get to watch the Portent teams “wow” their clients and have the satisfaction that I’m a key element of this band.

The post If Portent Were a Band: It’s All About the Hair appeared first on Portent.

The above image was taken by light artist Leo Villareal and shows the San Francisco Oakland Bay Bridge at night during a test run of Villareal's The Bay Lights art installation. This image is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported License.

Information Space has a conceptual mirror... Physical Space

Having recently worked my butt off to earn a Master of Architecture, I often come across those who are curious about my decision to channel my design education into the wonderful world of the interwebs. Basically, I'm regularly asked what capital-A Architecture actually is– as in, physical space-making (i.e. buildings, cities, landscapes)– and what it has to do with web design and development.

The Short Answer:
Everything!

The Slightly Longer Answer:
There’s a good reason that information technology professionals have co-opted the terminology of traditional architects and engineers. The processes of creating physical spaces and information spaces require similar strategies for problem solving, throughout both design and development– both are focused on handling complexity. You need field-specific knowledge for each, but the system of design is interchangeable.

Building dynamic artifacts

The resultant physical building or web site/application is all that remains of this process at the end. The product acts as a functional artifact of the process. Each artifact, whether physical or digital, requires maintenance (hopefully minimal) and offers an opportunity for improvement the next time around. Cities, buildings, and landscapes, just like websites and web applications, are living and breathing entities. They are not static, but intended by design to be lived in, played with, updated, improved, personalized. Nothing (even if it literally is) has to remain set in stone.

Creating anything this dynamic, whether it manifests as an everyday object, tested through generations of use, or as the most bleeding edge technological innovation, requires serious negotiation with a significant degree of complexity. True art emerges when complexity is rendered intelligible through smart design and development.

Where simplicity and elegance meet

Distilling complexity into something simple, intuitive, and meaningful is extremely challenging. And, it just so happens that excellent design seeks to realize these outcomes, whether the medium be digital or physical. Superb architectural design and suburb digital design never overlook or diminish the experience of the user, regardless of the complexity of the behind-the-scenes systems that help create it.

Blending the physical and digital

As information technology continues to penetrate further and further into our physical spaces, it behooves us to continue to look towards capital-A Architecture for inspiration regarding how best to approach the complex task of designing and developing tightly integrated artifacts. We are not trying to create a pseudo-built world. However, by consciously and carefully blending influences from both the physical and digital, perhaps we can eventually seamlessly integrate the two. And, while we’re at it, we can learn from the physical pioneers that came before us, to avoid the pitfalls that can ensnare a project, destroying otherwise nobel design intent.

We should aim for wholeness, a balance. If we root our digital systems in the real world, we create Place– a specific space that we experience and identify, navigate to, and associate with the experience of being there. The creation and habitation of space goes back to civilization’s very foundations, but only recently could we create Places in both the physical and digital realms.

(If you want to fall down this philosophical rabbit hole, checkout Martin Heidegger’s work.)

The application of design thinking to solve complex, interconnected problems applies equally to information spaces and physical spaces. Ultimately, the intent is to deliver a seemingly simple product that is immediately approachable, legible, functional, performs well, and is enjoyable to use. Of course, this isn’t easy. There are numerous stakeholders whose expectations must be met (and hopefully exceeded) throughout the process. So, here’s the kicker: when things get complicated, old-school design process alone isn’t enough. The way out is Integrative Design.

This is merely the preamble

An integrative process creates a support system within a creative environment. There is a multidisciplinary blending of specializations in which a diversity of fields inform, support, and elevate our work. In practice, Integrative Design is hard– really hard– but the rewards far outweigh the challenges.

So, I know you’re saying, “Wait, what?” But, this post is simply the first entry in a series on the topic, so stay tuned. In our next episode, we'll look at what composes the Integrative Design process. Following, we’ll explore the specific challenges of such a process, for example, the switching cost for an individual between different modes of thinking, and the challenges faced by a multidisciplinary team as they quickly iterate between cycles of design and development.

Well, I hope you enjoyed my inaugural post here at Portent. Until next time, keep making.

Bonus Section for the curious types: A theoretical perspective on the relationship between physical and information architecture

In both professions, a congruent process makes sense. It's no wonder that Christina Wodtke’s recent essay, Towards a New Information Architecture, takes its cues from Le Corbusier's seminal work, Towards a New Architecture.

At one point in Christina's treatise, she responds to a query by Jesse James Garrett asking where we can locate the "great works of information architecture." Christina asserts that they are "just showing up now." And, that they are not “pseudo-libraries or pseudo-buildings." Instead, information architects are “understanding spaces made of information. They are new works that make data dance. They make the impossibly complex clear."

The featured image above was taken by light artist Leo Villareal and shows the San Francisco Oakland Bay Bridge at night during a test run of Villareal's The Bay Lights art installation back on January 24, 2013. This image is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.

The post What Does a Degree in Architecture Have to Do with Web Design & Development? appeared first on Portent.

Change is in the air around Portent. Change that’s directly tied to how we see the future of Internet marketing. And it’s exciting. And it involves cool design innovations like parallax scrolling and HTML5 animations.

As we shift our focus more and more towards what we call 10% content—deeper, larger projects that take bigger risks but can garner larger rewards—we’ve shifted some departments too. The Content team here has officially moved over and joined Design to form one Creative Services super group, a la Crosby, Stills, Nash & Young. The result? We’ve got some really big and exciting projects coming up for our clients that will blow your socks off.

To celebrate—and maybe show off a little—Design hotshot Jess Walker and I have teamed up on this interactive infographic that details the reasons we at Portent love learning new design techniques. Click through for The Cutting Edge: Ten Reasons Why We Fall for New Design Technologies (and You Should, Too!)

The post Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques appeared first on Portent.

*****

If you’ve ever used Photoshop on a Mac, you’re probably familiar with this guy. Would you like to send him packing and never see him again? If you answered yes, strap on your Photoshop helmet and get ready for the blog post of your life.

For this blog post I am using Adobe Photoshop CS5 on OS X.

Need for speed

If you’re new to Photoshop, Adobe has included a lot of helpful tools and settings to keep you from flying blind. But I know that you’re a Photoshop superstar! You don’t need any of that stuff, so let’s turn it off!

General Preferences

Turn off Export to Clipboard

Export to clipboard is only useful if you’re copying things from Photoshop and pasting them into other applications. Why would you do such a thing?

Go to Photoshop > Preferences > General (Mac OS) or Edit > Preferences > General (Windows) and uncheck Export to Clipboard.

Interface Preferences

Turn off Drop Shadows and Tabs

Now that you’re in the preferences pane, select Interface.

There are three dropdowns here for Standard Screen, Full Screen with Menus, and Full Screen. Set the border to None on all of them. Drop Shadows around your window just add unnecessary visual clutter and probably a small performance dip, too. We don’t need any of that noise.

This is a personal preference, but I don’t like the tabs feature in CS4, CS5, and CS6. I like to see all of my windows open at once.

Uncheck Open Documents as Tabs and uncheck Enable Floating Document Window.

File Handling Preferences

Turn off Image Previews and set Maximize PSD Compatibility to Always/Never

Now Switch over to the File Handling panel. The first thing in there is the Image Previews setting.  Image previews are a thumbnail version of your file. They are useful when you’re browsing through folders in finder/explorer, but they also slow you down every time you save. Go ahead and set it to Never Save.

Maximize PSD and PSB File Compatibility is a dialog box that pops up the first time you save something in Photoshop. If you choose yes, it will make it easier to open your files in different versions of Photoshop, but it will also add a fair amount of bloat to your file.

If you work with other people who have different versions of Photoshop, you want to set this to Always. If you are working by yourself, set it to Never. Either way, you won’t have to see that annoying pop-up anymore.

Performance Preferences

Get more RAM

Now we come to the most important panel in the preferences window with regards to speeding up Photoshop. Select the Performance Panel, and take a look at the Memory Usage box.

RAM is the workhorse of Photoshop. If you don’t have any RAM, you’re gonna have a bad time. Drag the slider as high as you can without breaking the rest of your computer.

Use fewer History States and set Cache Levels to 1

History States allow you to go back in time and undo your mistakes. If you’re terrible at Photoshop, you probably need a lot of these. But we talked about this already. You’re a Photoshop samurai, so cut that in half.

While you’re at it, set the Cache Levels to 1. This will allow you to open your Photoshop files faster. If you set the Cache Level higher, files will open slower but Photoshop will be more responsive while editing larger files.

Buy an SSD

When Photoshop runs out of RAM, it will write to the hard disk.  This is called your scratch disk. For best results, get another hard drive besides the one Photoshop is installed on.

If you can, get a solid-state drive and use that as your scratch disk. Solid-state drives are more expensive than hard disk drives, and you get less space, but the write speeds are incredibly fast.

Type Preferences

Turn off font previews

Finally we arrive at the Type Preferences Panel. If you don’t have any idea what font you’re using, I suppose this would be useful. But let’s be honest, you’re only using Helvetica.

Set the Font Preview Size to NOTHING (uncheck it).

Obligatory conclusion

If you followed the steps above, Photoshop should now be running as smooth as butter. You’ll never have to see the spinning beach ball again. Do you think I missed anything? Do you want to fight about it? Let me know in the comments.

The post Make Photoshop Faster with These Simple Settings appeared first on Portent.

How wide should my email be?

Thin is in! This email weighs in at a scant 484 pixels wide.

Due to the unpredictable nature of email clients, it’s better to keep your emails thin. Between 480-600 pixels wide is a safe bet. You don’t want your users to be scrolling horizontally, especially if they’re viewing your email on a phone.

Use Tables for email layout

Email is pretty far behind when it comes to following web standards. Most of the fancy CSS3 tricks and HTML5 features you enjoy on the regular browser are not going to work in email.

CSS tags like float and position are unpredictable in email clients, so you’re going to rely on tables for most of your layout. I know this is contrary to what many web designers have been taught, but until email clients catch up to the rest of the Internet, that’s the way it’s going to have to be.

Design emails without images

This email looks good, even without images

It’s safe to assume that when someone opens up your email, they’re not going to see any images. Design your email with this in mind. Always provide alt text for your images, and never use one large image for your whole email. All the user will see is a blank screen.

Don’t Use Background Images

Though there are some hacks and workarounds, most email clients will not display background images of any kind. Don’t rely on background images in your design. Background colors however, will always work.

Use Inline CSS

Premailer takes the frustration out of email coding

Some email clients will prevent any non-html from rendering, so you’re going to have to keep all of your css inline. If you want your links to be something other than blue, you need to declare the color on every link. I recommend coding your email the traditional way, and using Premailer to move the css inline automatically.

Adhere to the CAN-SPAM Act

The CAN-SPAM act of 2003 lays out some rules you must follow if you don’t want your emails to end up in the trash can. To be safe, follow these rules:

• Don’t lie or be deceptive in your header or subject line
• Make it clear that your email is an advertisement
• List your company’s address somewhere in the email
• Provide a clear unsubscribe function

Read more about the CAN-SPAM Act of 2003.

Test, test test

Services like Litmus take the guess-work out of email testing

Just because your email looks good in Mozilla in your gmail account on your 15 hundred-dollar iMac, doesn’t mean it’s going to look the same to someone on a hotmail account. Always send test emails. If you are a hardcore email marketer, there are various services that will help you test every eventuality.

Did you find this post helpful, or do you have any other tips for good email design? Let me know in the comments.

The post Basic Guide to Email Design appeared first on Portent.

Want to know the secret to our success is?

How does Portent feel about hookers? What do Cybermen think about Portent?

You’re in luck, because we created an infographic that will answer these questions and more.

Click image for full size.

The post Portent Interactive: Origins appeared first on Portent.