How to design a website from the ground up

How to design a website from the ground up

This should be a short one. I often see people struggling when getting started with designing a website or app. Where should I start?

For now, I would skip the UX strategy, interpretation and research part (like creating personas, user flows, and journeys) and let's jump into this:

You know what to design and already have all the necessary information gathered together and you have to create the first wireframes and start to make design decisions (choosing layouts and grids for example).

Though I strongly believe in collaborative design and cross-functional teams - to list all the related buzzwords I know -, I'll present you a quick framework for designing ANYTHING.

Like this:

Pyramids of Giza

I'm kidding, you won't be able to design a pyramid.

Anyway, this is how I do it, this is how we do it at Webabstract every day and this is how you should do it if you want a great first version :)

The framework for designing great layouts

We will cover these:

  • Research competition
  • Gathering design inspiration
  • Research best practices
  • Building upon your previous works and solutions
  • Trying out multiple ideas
  • Decide fast, design just the necessary
  • Testing out different solutions

1. Researching the competition

First, I always start with researching the competition. It is always a good idea. I look for websites and create a list of the competition.

What to look for when digging into these sites:

  • What visual language do they use?
    • Colors, shapes, typography, imagery
  • How they build up the IA (information architecture)
    • How do they prioritize information? What they mark as important and what not?
    • Which layouts or grids do they use?
    • Do they use a one column grid or multiple columns?
    • Do they use a one-page-design or a multi-level navigation
  • Look for specific solutions
    • Say, you want to design a booking module. Look up how your competition uses the progress bar, how they designed the search engine
    • Inspect and borrow great solutions. Aka steal :)
  • Inspect the copy
    • Copy is very important. See how your competition is using text to "explain" the interface

A word about stealing

Good artists copy, great artists steal

Pablo Picasso

Now, this is not some empty phrase. This is fundamental to design and especially to UX and interaction. You want to ease your user's way of interacting with your product. You want a product that uses what already works fine out there and improve what's not.

Innovation is only possible through iterating upon other people's ideas because the outcome is the important, not the way how you achieve it.

Csaba Házi, @Webabstract

So please forget the rubbish about stealing, grab the solutions that are great and works well and implement them. Others will do the same and this is the way we can build better and better products.

2. Gathering inspiration

When you're done with competitive research (or most likely, these two are done parallel) go out and hunt for great designs that inspire you.

Dribble keyword search
Dribbble: enter specific keywords. You'll get a ton of different great solutions.

Place to go for hunting great designs:

  • Dribbble - the best designers are out here showcasing beautiful designs. Totally free to explore. (By the way, this is my portfolio :)
  • Behance - Also a great free resource
  • Pinterest - Yes, and there are hundreds of thousands of great designs there! Go explore!
  • Themeforest - These sites sell website templates. A lot of them are designed by highly skilled designers and are well thought-out.
  • Google it!
Current design project in Pinterest
One of my Pinterest boards. I'm gathering design inspiration for a current project.

#1 Expert tip

I use Pinterest for gathering designs for a specific project. I'll create a board dedicated to a project, have the Pinterest Chrome extension installed and when I find some great design I'll just pin it to my board. Well, it's not expert but I did like the sound of it :)

#2 Expert tip

Use Themeforest to research layouts. Enter specific keywords like "language school". Try filtering the results by best rated or best sellers.

Hints for searching

  • Conduct search for specific solutions on Dribbble eg.: checkout, subscribe, progress bar etc.
  • Collect ideas just for UI inspiration (you like the buttons, typography or the overall experience)

3. Researching best practices

Calltoidea and UIpatterns are great design resources
Calltoidea and UIpatterns are great design resources

This was partly done if you completed step one. You've checked out the practices used by your competition.

In addition, you should check out best practices for specific solutions.

2 great resources for researching best practices:

  • CallToIdea - an extensive library of (mostly) great designs categorized.
  • UIpatterns - this is a great collection of user interface pattern

Subscribe

Like the content?
We let you know when we have something fresh!

4. Building upon your previous work and solutions

It's also important to reuse what you designed in the past and worked well. For instance, I've designed a lot of checkouts and layer popups (By the way, here's a great article on the use of popups). Therefore, if I have to design an e-commerce site I also open up those designs and style guides to see if I can reuse certain elements.

Create your own style
I think it's good to have a preference in styles. If you prefer certain design solutions (eg buttons, typography) it's advised to reuse them.

5. Trying out multiple ideas

I strongly advise you to start low-fidelity when designing. This will allow you to try out different solutions.

Now, here comes the hardest part. Actually designing the layout. Now, I think here the most important thing is that you play around with multiple ideas.

Always start lo-fi
I strongly advise you to start low-fidelity when designing. This will allow you to try out different solutions.

Try sketching on paper or quickly drawing ideas on the whiteboard.

Paper prototyping: effective way of rapid idea testing
Try paper prototyping. It allows you to quickly play around with different ideas.

Tips for lo-fi sketching:

  • Try our radically different ideas at first
  • Start by gathering every element that needs to be on a page
  • Don't draw fully fletched layouts, just the skeleton

The best: spice it up with collaboration

In my experience, you get the best results if you put together a team of designers, developers, and stakeholders and try to brainstorm and design together. Often, great design ideas come from developers or other non-designers. Try the design studio model, described here:

Make design decisions fast

6. Decide fast, design just the necessary

The great design workflow:

  1. Do the research, follow patterns and best practices
  2. Design fast
  3. Decide quickly on design problems
  4. Test out everything

Let's break it down.

We've already talked about how to do the research.

Why is it important to design fast?

The more time you spend on polishing and extending the design, the further you go into the unknown. Wow, that sounded like a voiceover from an adventurous movie.

The fact is, you don't know, how your designs will perform and which of your design choices will be good and which of them will prove to be wrong.

The quicker you can get your designs in front of your customers, the earlier you will start learning about your design decisions.

Therefore, the quicker you can get your designs in front of your customers, the earlier you will start learning about your design decisions.

I always see people struggling and spending unimaginably lots of time over tiny design details and pushing pixels. In most cases, these are irrelevant details and hesitation on equally great solutions.

The reality, on the other hand, is that you ALWAYS have more important issues to solve than these. You just have to start gathering user feedback.

All in all, speed is important for a great design workflow. This brings us to this next statement:

Decide fast on design problems

Most of the product teams I've met had very limited time. Therefore, you have to limit the amount of time you spend on designing solutions to each problem.

This is 100% psychology. Trust me. You think you have to iterate those design before handing them over to the customers? You think you need a better solution before releasing an app?

This is the reality:

  • You've flashed out multiple solutions and each of them could be viable
  • Most of the time, these details are just important for you, really
  • If there's a more fundamental issue, probably you have to through the design away with all those details

So, stick to this: Just enough design. Start by reading this chapter from Laura Klein, author of UX for Lean Startups:

UX for Lean Startups by Laura Klein

How to decide if a problem or feature is important? According to Laura Klein:

You need to start by asking (and answering) two simple questions:
What problem is this solving?
How important is this problem in relation to the other problems I have to solve?

Laura Klein

What I call "fast decision making" and "just enough design"?

  • Design the significant parts - that really affects your business
  • Solve only the important problems (trust me, you ALWAYS have important problems)
  • If you have a good-enough design, go out and test it, don't spend more time coming up with ideas for the same problem until you don't test
  • If you have to decide between design concepts, just choose the one you think will work and test it out. You'll have time going back to the other idea if that proves to be wrong.

Expert tip: What to do if you CAN'T DECIDE on a design?

1. Step back and close your eyes.
2. Pick one.
3. Test it out

Sounds funny, but trust me it works. Why? Because I know your personality and worked with people like you a lot of times. You are a perfectionist and a real pixel pusher. The designs are already great and cannot be iterated further without user feedback. You have to learn to focus on the core problems, decide faster and let those petty details go. Try this method above, it works.

7. Test out different ideas

I've mentioned testing multiples times. It's also fundamental to design.

How you can test your designs (a few ideas):

  • A/B testing
  • Usability testing
  • Perception testing
  • Click testing

I won't go into detail here, but there will be articles on this topic soon. Anyway, here are a few ideas how you can use testing:

  • Use A/B testing for deciding between design solutions, and measuring success
  • Use usability testing to uncover design problems
  • Use perception testing (like Five-second-testing to measure what your users feel about your designs, and what impact does it have on your users. Here's a recent article I wrote about these tests: The first impressions: What could cause your visitors to leave your website?
  • Use click testing to find out if your users know how to perform the important interactions

Rule of thumb: Always prioritize!

UX and Lean are about ruthless prioritization. As I advised you to solve the important problems, only address the important problems when testing.

Key takeaways

So, this my method of designing layouts. Here's the step by step outline:

  • Research your competition
    • Look for viable solutions your competition are already using
  • Gather inspiration
    • Open a Pinterest board dedicated to your project
    • Get great designs from Dribbble, Behance, and Pinterest
    • Look for specific solutions
  • Look up best-practices and patterns
    • Check out call-to-idea and UIpatterns
    • If your customers are accustomed to a solution (sign up, checkout) they will welcome if you use it
  • Use your former designs and solutions
    • If you got something that worked well, use it again
    • Create your own style and library
  • Try out multiple ideas
    • Always start lo-fi (paper prototyping, whiteboard, design studio)
    • Don't limit yourself at first
  • Decide fast, design just the necessary
    • Don't spend time hesitating over design decisions
    • Decide fast, start learning fast
    • Design just the important parts, only pay attention to the details that affect your business
  • Testing out different ideas
    • Always test
    • Do usability testing, A/B testing, and perception testing regularly
    • Let the test be your judge

This was the method I use and that we use every day at Webabstract :) If you have any questions or thoughts drop me a line or write a comment below.

If I could be any of help, feel free to contact me at csabahazi@webabstract.io

Got a burning question?
Or are you ready for the next step?

Schedule a quick 30 min call with us,
we would love to help you!

Schedule a call with our expert
Blueprint book

Book

How to design products that people love to use

Do you fancy having access to a comprehensive handbook that explores this new and exciting field? So do we! But, we didn't manage to find anything that was detailed enough. So, in the end, we wrote our own handbook!

We are currently working on the most-detailed, experience-rooted handbook ever crafted in the field of UX product design, with case studies and specific examples, born out of our passion, research, and everyday working practices.

Interested? Enter your email below and stay tuned!

What can we do for you?

  • Product UX/UI design
  • Mobile applications
  • Consulting
  • UX research

Let's talk

Daniel Knaust

Daniel Knaust

Co-founder, CEO
danielknaust@webabstract.io +36 30 626 29 66
David Dorosz

David Dorosz

Co-founder, COO
daviddorosz@webabstract.io +1 314 919 6461
Let's talk
Thank you for contacting us! We will get back to you as soon as possible.
Copyright by Webabstract 2017
Thanks for subscribing!
Want a Free UX Consultation?

We can review your product, get expert feedback or discuss UX and design issues.

No, I'm fine

Thank you! You are awesome!

We will contact you shortly!

Return to the blog

Schedule a friendly call with our expert

Enter your email address and we will contact you to schedule the call:

No, I'm fine

Thank you! You are awesome!

We will contact you shortly!

Return to the blog
Free eBook

Improve your product’s UX with these 10 simple steps [FREE EBOOK]

Sounds interesting? Enter your email and download the ebook for free!

No, thank you

Like the content?

We let you know when we have something fresh!

No, thank you