This is one of my strengths having messed with web design for so many years. It’s my secrets and I shouldn’t be teaching it for free but the community needs it.
Seriously…you would think in this day and age, with all the FREE easy-to-use tools out there that we would have finally have great web design as the standard, but we don’t. In fact, I think we’ve actually taken a step back from what it was 5 years ago!
All the sites today look the same now!
- Some kind of header menu fade, big hero image with conversion buttons, parallax and fade-in animations, some random text/number blocks in 2-column, 3-column, or 4-column format. Maybe some curves and geometric shapes.
We are more same-ey than ever before and it bothers the hell out of me! Read on for some real pro design tips!
1. CONTENT – start with your content
Not colors, not cool logo or branding, not layout, not a theme. Write down the text, get images together. If you don’t have any of that yet…then I can assure you that what you need isn’t website DESIGN but website CONTENT.
- The CONTENT is the reason why people come to the site.
- The CONTENT is the reason why people find value in the site.
- The CONTENT is the what the DESIGN is framing.
- The CONTENT is the user experience, even more so than the design! (Don’t believe me…tell me the last fancy website you remembered that had useless content…vs how many sites can you remember that look ugly but you use it everyday!)
You wanna know why many website designs out there completely suck? It’s because they start with the design first. They start with some generic copycat design template, and then put in generic content in a typical way. It’s always the same’ole same’ole vibe. BORING!!!
2. LAYOUT – space it out
Lay out what you have, and pay careful attention to how content and items are spaced around each other. Pay close attention to how their distance from each other communicates their relationship with each other. Then start thinking about size. Do you want subtle size differences between each element? Or do you want lots of BIG BOLD TITLES?
Again, think about content organization. Spacing, sizing, relationship, information flow. Think of the LOGIC behind your organization. Don’t worry about being cool or unique. Just think of the most eye-pleasing spacing for your content.
3. EMOTION – decide on a vibe (or emotion).
- RELAXED or AGGRESSIVE?
- BOLD or SUBTLE?
- PERSONAL or CORPORATE?
- MASCULINE or FEMININE?
- OLD SCHOOL or HIGH-TECH?
- CLASSIC or ARTSY?
Pick the colors, fonts, and overall styling that you think would give that emotion.
4. MOCK-UP – start mocking up draft designs.
There are two ways to go about this:
- For those who don’t know what they want/need, don’t have much time/budget – Do 3 mock-ups. Pick the best one (or one that fits your design best). Then refine it 3 times. FINISH. You can always update the design later after 6-12 months. when you have a much better idea of what fits and doesn’t fit.
- For those that with tons of time, budget, and enjoy the creative process – do like 10 mock-ups and then 100 revisions of the top 3. Then crown the best one king at the end. I only recommend this method for redesigning existing company websites. Lots of work but lots of fun!
Yes, it takes time. if you love what you’re doing and believe in what you’re doing, you will easily swallow this sacrifice. If this sounds like too much work for you, then put the computer down and go hire some kid to throw out a generic design for $2k. The logos can come at this point too if you haven’t already made one.
5. ADJUSTMENT – execution refinement.
Everything sounds good until you put it into practice. It always happens that way! The design looks perfect until you start coding it and adding content. Once you see it live, you start to realize little things you wish had been done differently. This is why I believe the last “design phase” is actually during the development phase. This is also why I believe you should try to get out of the design phase as quick as possible. The sooner you start executing it and making it live, the sooner you get a better idea of what fits or not. Anyway, make final adjustments as needed.
6. REVISION – make notes for the next revision
I’m sure you’ve probably already thought of a hundred extra adjustments and things you want to add later. I URGE you to stay chill and don’t add it to the project. Let the initial design project and instead, you simply write down the adjustments and save it for the redesign. It’s ok, just write it down now while everything is fresh in your mind. And trust me, a few months after your site is live and being used…you’ll have plenty more good ideas to add.
Why do so many designs/designers take shortcuts?
If I had to guess…it’s either lack of knowledge/experience or lack of effort/time/budget. Lack of standards is another one as well. Most people don’t want a unique site. They want something that looks like an idea they have in their head based on a stereotypical design they’ve seen before. I’ve had many instances where our team wasn’t even finished with the design and the client was already happy with the way it is. WELP!
Most companies just go straight to mocking things up as if they know what the end should be like. It’s both a good and a bad thing. Many talented designers (with a clear vision) work with the end in mind and don’t need to go step-by-step. Obviously, this guide isn’t for them. But for those who’ve never really done professional web design work before, I highly recommend you try to stay open-minded and work towards the end in a logical manner rather than trying so hard to force your brand and content to fit into an idea of what you’ve seen before. You’ll surprise yourself how much better things can look.
So is that all there is to making “unique” web design?
Yeaup. I know, maybe you thought I was going to give you styling ideas but you really don’t need that. What you need to know is that the content is the #1 aspect of your design. And if your content is unique, and you prioritize the content in your design, then your overall design will be unique. You don’t have to try so hard to pick wild colors and logos.
Being a minimalist and writer myself I agree 1000% with this article.
The only thing I can’t avoid to say, if you don mind, if I were you, I would narrow the content a little, maybe 550 pixels maximum, to make it even more readable.
By the way, today I spent already 3 hours on your site, for me your content is incredibly good, useful, interesting, and enjoyable.
Congratulation Johnny and thank you a lot.
Thanks for your feedback and comments. For sure I won’t do 550px because it makes my longer articles way too long to scroll (and harder to skim). I think if you really really wanted, you could try the Stylus extension for Firefox. I’m using that right now to do Sridhar’s masonry FB layout and it looks great. Setting a narrow width for my site would take you 2 seconds.