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.

Good design doesn’t just mean pretty, it means functional too. Sometimes a website is born that combines those two things seamlessly. It’s like a miracle. Or more likely, people worked hard and communicated with one another, allowing design, functionality, and content to come together and deliver a clear and helpful message.

A functional website satisfies two important needs:

• People who’ve never heard of you before should be able to figure out what you do in less than thirty seconds, without clicking on anything.
• People who know about you should be able to get to what they want in 1-3 clicks.

A well-designed site must allow both to happen, while being aesthetically pleasing and providing relevant information. If you’re stomping your feet and whining that you don’t want to have to do all of those things at the same time, the Internet should be taken away from you and your bad web design. You can have it back when you’ve had some time to think about what you’ve done.

So, in no particular order, let’s see some good design!

Ript Apparel

Ript Apparel is a clothing company that specializes in made-to-order t-shirts that feature original pop culture designs contributed by independent artists. With the exception of a few reprints, the designs are only available for 24 hours, making each shirt they sell a limited edition collector’s item.

If you didn’t know any of that before now, it’s at least immediately clear from their homepage that they’re an apparel company and you can get a rad shirt with featuring a pirate-esque Super Mario water-skiing on a couple of Koopas

Due to their unique business model, they have no need for any kind of category page, so nearly all of their content can be reached within 1-3 clicks from their homepage. While there is, admittedly, not a lot of content on the homepage, everything above the fold is relevant and useful, and everything below the fold is devoted to engaging their users in a discussion.

Camera+

Camera+ starts off with the bare minimum of what you need to know – it’s an app, it takes pictures, you can buy it for $1.99. Mission accomplished. To add some icing on that cake, the image of the phone plays a little video that shows you how to use the app, and if you want a more in depth tutorial there’s an intro video linked right above the ‘buy now’ button.

You could argue that it loses a little functionality by lacking any sort of navigation – if you want to know more about the product you have to scroll down, getting into finer and finer detail the farther you go, but there’s no way to go straight to the information you’re looking for without skimming all the information available. Still, the page isn’t that long – it tells you everything you need to know without being verbose, and it does so using excellent photography and consistent attention to spacing.

Crowdrise

Crowdrise holds a special place in my heart because the entire site is laced with humor, which as we’ve mentioned before, rules the internet. This is another site that knows how to keep things simple. Nearly any information that you could be looking for is available in one of those top five drop-down menus (though they could probably stand to make it a little more obvious that those are, in fact, drop-down menus).

And if you don’t know what Crowdwise is about, the navigation and slideshow text is full of keywords to clue you in that their mission is, as the tagline says, to give back. Crowdrise is an easy, secure way to raise money for good causes, and they provide that service with a great sense of humor.

Strawberry Jam

These guys break the 1-3 click rule a little bit – but you don’t actually have to click the big pink button to find out what they do, you can just scroll down. And to be fair, the big pink button is – you know – big. And also pink.

Strawberry Jam combines all your social media feeds so that, for example, if you’re friends with all your coworkers on Facebook and/or Twitter and they all suddenly decide to share the same link to the same article at the same time, you only have to see it once. And if you already knew that, you need only fill out the form to sign up for the beta. One click and done.

Trip Lingo

This is another app – which you can see from the handy pictures of it shown on both i-Phone and Android screens. For newcomers, all the basic info about what the Trip Lingo app does – it helps you learn other languages so you can communicate with locals while you travel – is right there when you arrive on the page, no clicking necessary. For people who already know what it is and simply need to have it now, there’s a big shiny button to get you started. And if that’s not enough for you, there’s a big ol’ features section right below the fold.

Foodzy

Foodzy is another addition to the craze of turning diet and exercise into a fun social networking game. The site combines fun, colorful, retro-style illustrations with a clean, to-the-point design. Their purpose is laid out in three steps at the top of the page, there’s a cute video to watch if you’re still not sold. If you’re already shouting sign me up there’s a big green button at the top, just for you.

Louise Fili

Louise Fili specializes in packaging design for restaurants and food products, which is what it says in that big red bar. Her work is divided into clear categories which are listed along the top, and she combines beautiful photography with a minimalist design to showcase her art. This is another example of a website that’s lacking a lot of text content, but portfolio sites are one of the few cases where that’s not terribly necessary. Portfolio sites should be carried by the work you’re presenting – if you have to mince words to convince people why they should like your art, you’re doing something wrong.

GOOD

Editorial sites often have a problem with spacing; they get caught up in trying to fit as many interesting headlines on the page as possible and forget that if they aren’t easy to read, no one is going to read them. GOOD doesn’t fall into that trap. The site is pretty and easy to read, there’s a nice balance of images, content, and negative space, and the title changes from ‘Good Morning’ to ‘Good Afternoon’ depending on what time it is, which is nifty.

Evernote

It’s hard to explain what Evernote is, since there isn’t really anything else like it out there (it’s not quite a blog and not really a social network), but they do a pretty good job of presenting the basics. If you already know what Evernote is and want it, the download button is right there in the middle of the page. Plus the logo cleverly combines an elephant (because they never forget) with a standard page icon, and I’m a sucker for clever logos.

Squarespace

These guys don’t do anything terribly fancy as far as visuals, but they don’t need to. Squarespace is a site creation software and they follow the rules to the letter – the who, what, and why are spelled out for you above the fold and the call-to-action is the first thing you see (as it should be). Any other information you desire is available within 1-3 clicks and overall, their site reflects the clean, elegant professionalism of the product they offer.

And that’s it! Ten beautiful websites for you to fawn over and strive to emulate. If you have any that you think should have been featured (or any good design, not just websites but logos, posters, email blasts, etc.), let us know!

The post Good Design Roundup 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.

We spent a good ten minutes going through each page and discussing what the art should be in a vague, Friday afternoon sort of way, which mostly just meant that ten minutes later I still had no idea what to do.

In a desperate attempt to get me out of his office, Tracy went over the pages again to try and make things clearer, and he ended up saying this to me:

So I drew a dinosaur.

The post Creative Art Direction at Portent appeared first on Portent.