Guide to developing your website right on the first try, based on my own process and approach. I hope you find this primer helpful!
Who am I, and is my perspective applicable to you?
I create branding, do the design, and the programming, and the ongoing digital marketing – so I am painstakingly aware of inevitable future frustration when BRAND + BUSINESS + COMMUNICATION are not aligned.
This approach to prepping for a 1st time website design or redesign will work for you whether you are an individual making a personal portfolio, or a XS/S/M/L/XL business.
Let’s start ourselves off right by focusing on these from the get go!:
– Getting the Brand Tone / clarity conveyed
– Focusing on UX (user experience)
– Tying development to user journey / pathway through our product lifecycle from the get go.
Worksheet: Here’s what you need to get started with your process:
1. JOURNEY MAPPING: Layout your end goal, and define how we get there.
(In the product world you may have heard it called product lifecycle.)
I am building this website because I want people to: ____, then ____, then ____, and finally _____. (you can have as many blanks as you want)
I want people to _see a vibrant picture of me_, then _read about me_, then _see the work i’ve done_.
is a very different route from
I want people to _get latest style tips_, then _subscribe to my newsletter_, then _reblog my content_, then _sign up for my intro online class_, then _buy my book_, then _buy my premium offering_.
2. SITE FEATURES: What do they come here to do? “When they come to __.com they should be able to do __ and __ and __.”
Think about Disneyland. You don’t say to friends “When we go to disneyland, we are going to go on rollercoasters, eat lunch, use restrooms, and buy souvenirs”. Visitors don’t care about your physical locations of facilities, they care about things they can do that create a defining experience for them right away.
You say “we’re gonna check out Tomorrowland, and that Michael Jackson 3D show, and watch the Main Street Parade at night.”
You don’t say “We need a taxi car to take us from A to B”. You say, “I just booked our Uber, he’ll be here in 3 mins. I got us an SUV! Tell Gianni we’ll be there in 10 so meet us directly at the restaurant.”
So, resist the urge to think of features as a list of pages “home about contact blog”. That is the backwards approach. Work from the components to build the experience you want to convey.
Ex: Betty Crocker might be:
“- A live streaming video gallery is our most important feature to feel like we’re talking to visitors right away, but I want the video player to have visual design hints of retro 60’s.
– A sign up box for tips to introduce newbies to baking.
– A bake sale gallery.. made up of instagram photos from user hashtags who used our recipes.
– An easy way to read and bookmark recipes
– A way to quickly buy the tools we recommend, as well as fan gear!”
When we get our heads out of the trees, aka. when we get out of trying to make it through the day to day, we can see focus on curating the overall journey (the forest).
3. DESIGN ELEMENTS: Gather your inspirations of what you want your digital home to feel like.
Physical visual inspirations: Video clips, magazine layouts, sections of other websites you may like the functionality of
Brand Tone: Companies, Media Personalities, Locations (Places / Eras. ie. fresh foggy paris winter morning)
It is important to define what you are MORE like, and what you are LESS like. Be as specific as you can. Make two columns. Start with listing what you know: I’m definitely like THIS THIS THIS. Definitely NOT THIS. Then fill in the opposing column for that element which will inadvertently explain us WHY.
LESS — MORE
a — b
c — d
e — f
For example: My performance persona Chuubie is MORE rainbow brite dress up costumes with a precise eye on overall aesthetic, LESS earthy loose burning man costumes and LESS cold distant fashion drag costume.
Find sites that inspire you.
After that, here are some additional places to look for website inspirations (since these are out of your genre, focus on finding components you like (ie. i love how they did their intro gallery slider, i love their interactive sidebar, etc):
If you found this helpful or have any thoughts or questions, please leave a comment below.