Do you ever wonder when you hear a new song what the artist was doing, thinking, and/or dreaming about as they wrote it? I do. Creativity is a marvel to me — not that I find it difficult to be creative or dream up new ideas, but that so many amazing ideas have come to fruition over the centuries just blows my mind. How people can harness their creative visions and turn them into something tangible is one of the best parts of being alive, I’d say.
I see the same sense of wonder sometimes when I tell people I’m a web designer. Not that pushing pixels is the same thing as mixing music or painting a canvas, but that most people I talk to have no idea how an idea becomes a vision becomes a design becomes a cohesive site that you can click and read and interact with.
None of these creative pursuits are magical. They’re all the product of a process.
What I’d like to do in this post, and the few that may follow, is to share my process for turning an idea into a full-blown website. I have a feeling it may help some of you in guiding your own projects to fruition.
And, rather than just talk in abstract terms, I’m going to walk you through how I recently redesigned Bright Coconut, because ideas without implementation don’t carry the same force, and I want you to be able to see what I say without the haziness of imagination coming between us.
Most Wanted Response
When there’s no pretending
Then the truth is safe to say
Start with the ending
Get it out of the way
Always start with the end in mind. That’s both from a reader-response angle—I want them to contact me, I want them to sign up for my newsletter, etc.—but also an emotional angle, i.e. how I want them to feel, what the mood you’re setting with the design is, etc. You want everything on the site, from layout and color to images and text to all flow into that goal.
Whatever you’re selling, giving, offering, etc., you’re doing it to add value to people’s lives, right? Your job now is to communicate that value to your reader in a way that is clear and undeniable. You want them to cruise through your site, screaming, “Yes! This is so what I want!” (If you need a reminder of that feeling you’re trying to capture, Meg Ryan can be a huge help.)
Content-wise, for the most recent Bright Coconut redesign, my goal was/is to have people who resonate with the way I work reach out via contact form so we can start a conversation around their website project.
To that end, I kept the headline and all the front page copy short and to the point, so people would know right away if they were in the right place or not. And the first Big Button takes people to my Sites page, which is where 99% of new visitors want to go.
Making it easy on your readers = happy readers.
Visual/Aesthetic Design + Layout/Organization
Once you know where a project needs to end up, the next step is to do everything you can to make sure you get there.
With that in mind, I look at the visual design and the layout/organization.
- Aesthetics/Visual Design is important because if a site is ugly, people may leave just because it hurts their eyes, even if the content is solid.
- Layout/Organization is vital because if people can’t find what they want, they may bail out of sheer frustration before ever getting to the good stuff.
Deciding on a Visual Design
Minimalist? Handdrawn? Corporate? Lush? Photo-dominant? How do you choose?
Take a look around at things that inspire you.
This could be other websites, but it could also be anything from nature to music to poetry… but sticking with visual inspiration tends to make it much easier to translate your ideas into a website. For example, you may find inspiration in products you like. Book covers. Posters. The window design of a store in a mall. I mean really, how can you not be inspired by Monument Valley or the Baratza Sette?
Whatever the source, make notes. Freestyle ideas. Let it flow. You never know when an idea will kick off something amazing.
I do suggest paying particular attention to other websites you like. Having a list of things you’ve seen that you like is also a really easy way to tell your designer what moves you in a way that’s concrete, and doesn’t leave them guessing at your intentions.
When I take notes, I like to note the url, grab a screenshot (in case they change the design before I come back around to it), and a little note about what it was that caught my eye. If you do this, then when you go back to your notes, it’ll help you recapture the moment of inspiration easily.
Design-wise, I wanted to stick to my minimalist roots, yet make it visually interesting, and keep along the “tropical” vibe of the Bright Coconut brand. At the same time, it needed to be visually interesting and show potential clients that I do actually know what I’m doing. It inspires confidence, y’know?
Layout/Organization
Give people enough information to make a decision, and no more.
Lawdamercy, why do people cram so much into their designs? It is way too often that I go to a website and have to let my eyes adjust to all the cruft before I can figure out what they’re trying to offer people.
If you want people to get where you want them to go, make it as friction-free a process as you can.
Let’s take an example: sidebars.
Personally, I’m not a fan of sidebars anymore. In my eyes, they distract from the main content you’re desperately trying to get people to pay attention to. For me, eliminating a sidebar is an easy decision.
This may not be true for you and your situation, of course. Every business and every site is different. Rule of thumb: if it’s not giving vital information or contributing to the reader’s experience, ditch it.
Ask yourself: “What do people need to make a decision about what I’m trying to offer them?” And then get rid of everything else. See how that feels. If you feel something is lacking, put it back. But don’t put it back too soon.
This goes for your front page and its sections, the number of pages you have, navigation items, sidebar widgets, footer content, the actual content on your pages/posts/landing pages, you name it.
For the Bright Coconut redesign, I got super ruthless. I looked at every headline, every graphic, every chunk of text, list, image, and widget and asked myself, “Do people need this? Is this helpful? Is what I’m looking at contributing to their knowledge and experience, both of website projects and my brand?” And if it didn’t, I either improved it so it was, or I got rid of it.
As a result, it’s the cleanest/meanest/leanest site I’ve had in a while that I’m really happy with and proud of.
Is that it?
Oh, far from it. In order to really lay this process out and make it useful to someone like yourself who is most likely considering their next project (a new site or a redesign), I can’t cram it all into one post. Partly because then it would take forever to read, and partly because if I tried, I’d likely never finish. And I really want to get all of this info out to you in a way that works for us both.
I had originally thought to go through the steps of creating a design using the latest Bright Coconut redesign as an example. But, then I realized it wouldn’t be as helpful seeing a site that’s already done, because I would naturally gloss over bits and pieces and forget things. And, what would be most useful would be to see the process unfold rather than give you a past-tense recap.
So, I’m going to start a new site instead, and show you step-by-step how it all comes together. It makes the most sense to break the steps down into a bit more detail, along with examples so you can see how it all works in real-time, and how the process evolves. My thought is to open up each step there to feedback, so you can have a hand in shaping the new site, too. Sounds fun, huh?
I sure hope so. If you get anything from these posts, would you mind leaving a comment below? That’ll stoke my fires in a huge way. And if you have questions, or want more/less detail as I go, let me know that, too. (I ain’t just writing this stuff for myself, y’know.)
To be continued!
Leave a Reply