Search the site:

Copyright 2010 - 2018 @ DevriX - All rights reserved.

Website Design Concepts: How to Design Concepts in No Time

Website design concepts

At DevriX, we often get requests for design concepts that must happen quickly. And this is why we call them concepts, not fully polished and well-researched designs.

With quick concepts we can show the look and feel we’re planning and after, and that we will have more time to polish with the marketing team later. Because of the quick production rate, it’s possible to share a lot of variations in almost no time.

With one project, we did three completely different design approaches, each with 5+ pages (one had about 15 different pages with different components).

Once the client had picked the overall look and feel, we began developing the full pages with more solid rules about the style guide – colors, typography, spacings, visual elements.

During this phase, there was more polishing. While we were nailing down the exact way the header had to be, we ended up with over 60 variations just for that. All of this in less than a week.

We decided to make the final adjustments together with the client. I had Adobe XD open on my laptop and screen sharing live. More than 60 different artboards were on screen and the client was picking which artboard to work on.

Once we had this, the requests were like:

  • Can we swap the icons for X and Y?
  • How about a larger font for all components?
  • Can you place the header bar over the image?
  • Maybe blur the image behind the header bar?
  • Can we have a search field over there?
  • Maybe X Y Z buttons to the top right?

All of these requests were coming directly as we spoke and I was updating, duplicating the artboard for every new addition so that we could easily see how it looked without or update the previous version.

For less than 30 minute call, we had the final version that went to development.

So Why Is It So Easy to Prototype Quickly?

Adobe XD is lightweight, even with hundreds of elements, it doesn’t lag on standard MBP 13” MBP with 8GB RAM (while Chrome is doing its thing).

You can easily move around the artboards with no hiccups, which makes navigation quite easy. Selecting, moving, updating elements happen in real time with no waiting. All the rest comes from muscle memory and key sequences.

The interface is simple, there’s nothing extra that you don’t really need. And thanks to its snappy work, you can get as many artboards as you need:

One of our graphic designer’s screens

Next, there are just a few shortcuts that are really more important and they pretty much cover all the tools you use all the time:

  • V – select
  • R – rectangle
  • E – elipse
  • L – line
  • T – text
  • P – pen

After which you have some additional ones for layers, assets and the standard shortcuts for formatting text like bold, italics.

Layer modifications for group, repeat and alignment are two keystrokes away. Once you memorize the 10 main shortcuts, it should be more than enough to keep you going and not slow you down while working.

When you look at what modifications XD provides to the different layers, you might think “only so much?”. It is true that it lacks some specific tools, but you can easily get them (if needed) from other software such as Photoshop, Illustrator or the Affinity Designer/Photo apps.

This is an overview of the mechanics. Now let’s cover some of the strategies.

The Right Mindset

You can’t produce quick concepts if you carefully align every single pixel, make sure that all fonts are the right size across the whole site, all colors are truly consistent. You would really need to spend a lot of time to get it from 95% to 100% perfect while most of your clients won’t notice the 5% missing on the initial phase.

Don’t get me wrong, the concept should not be sloppy. If it’s not aligned it will definitely make a bad impression and you can lose the job, the point is that you shouldn’t spend too much time polishing it as it will most likely change anyway.

Here is an example of a design for an imaginary project with 0 specs, only the goal to make a “learning center” site. Any page can be represented, any fonts and colors can be used. No limitations at all. Time to complete: 60 minutes:

Note – the goal was to work on it for exactly 60 minutes. If the page is to be completed, it would take another 30 minutes. This is not a realistic project. In real life, more requirements must be taken into account. It always takes more time than that.

But this approach has one major flaw – it’s not well researched. We do not approach the design phase like this and do not recommend it as the only way to design a site. This should definitely not be the final step. All it does is give a foundation on which you can build.

Colors should match the brand and should work well together. Fonts must be easy to read, white spacing should be balanced. Contrast should be high enough for everyone to read easily.

The design must be consistent and should allow the site to expand.

This takes time. It takes research from more than one team. It is the longest phase, where you shouldn’t rush anything (considering there’s enough time).

When you prototype/design concepts quickly you can:

  • Come up with a few color schemes to showcase quickly.
  • Be more loose on the finer details (15 vs 16px size, 2 vs 4px spacing etc).
  • Pick any image that fits a specific place or even use placeholders.
  • Quickly showcase variations without diving into details.

But when you go for the final version you should:

  • Be very accurate with your spacings.
  • Think of how you can keep the look and feel consistent on the whole site.
  • Do a UX research or at least follow best practices.
  • Define typography rules and follow them.
  • Do not invent new colors, keep tight with a set color guide or think why you need additional colors. How would you proceed if you needed more?
  • Spend more time on it.
  • Sync with the development team for the implementation of the more trickier areas.

The more you can move from the second list into the first without sacrificing too much time, the better your final results will be.

And this quick prototyping helps in one more important area: the creative block. Not every time cam a designer produce results in an hour. Sometimes a simple page can take a day because “nothing works out”.

The faster a designer can produce such pages, the more different variations can be produced. You can never expect such a production rate on a daily basis as this kind of work is extremely demanding.

Concept artists in the movie and gaming industry have the same problem – getting a concept from white canvas to rough draft is the hardest part, adding the details later is way less (mentally) exhausting. If you make your designers work on different concepts constantly, expect them to burnout soon.

Visual Library

The final part that should be mentioned is the hardest to obtain. A rich visual library. What is this?

This is the Pinterest or Dribbble that you have in your mind as a designer. The patterns and combinations that work well together given certain requirements.

It is the hardest concept to obtain simply because a designer needs years and hundreds of projects to create this map of ideas and patterns in their mind. And by now the benefit of such map should be obvious:

There is no need to constantly look up how certain elements can be made.

  • “A list? No problem, I can imagine 50 combinations for this style.”
  • “Font? Let me pick one of the 20 I tried the past week.”
  • “Colors? I will try some of my 30 favorite ones.”
  • “Style? I love going for X Y Z, but this time I will pick G.”

This doesn’t mean that a person with rich visual library doesn’t need any external source of inspiration. At least I don’t know of such a person, but it means that in the day to day there is no need to constantly browse for ideas.

An example exercise would be to design a header for a site. That’s all the requirement there is, everything else is up to the imagination.

Now do 10 variations of it. After that do another 10. Can you get all the 21 designs ready in less than an hour or even 30 minutes? How different would they be from one another? Same challenge can be put for any element imaginable.

  • First, the welcome section on a site – literally thousands of variations.
  • A list – There are just so many ways you can make a list.
  • Menu – Would it be in a sidebar, full width, mobile, footer?
  • Footer – How many different components you can place in a footer? Will it be 60px high or as tall as the viewport?
  • Comments – You can literally go for name + comment list or add features for upvoting, sharing and more. Like a mini social network.

It can take a decade of daily work to build a rich visual library that will truly make a designer stand out.

This is one of the biggest secrets to working fast. It can apply to any field you can think of – writing, programming, drawing, music. Anything. It’s that collection of patterns that work well with other patterns.

Thanks to this there’s almost no moment when you sit and stare at a blank screen. Instead, you directly apply the patterns you are thinking about and see if they work as well as they do in your head.

And this is the reason why XD is a good fit for my work – it doesn’t stand in my way. The limited amount of tools, while making choices less, actually increase productivity.

What to Remember?

Learn the mechanics of your tools – Move the fingers fast, make the short key combinations a muscle memory and don’t even think about them. All the combinations to get from point A to point G in as little time as possible.

Know your goals – Is it a polished final design or quick concept/prototype? Is it a mockup where you need to consider good navigation and relevant information? Depending on what phase you are at, you need to adapt your workflow.

Build a rich visual library – It can only be achieved with years of work. You should constantly look for ways to design a certain feature or element. Always browse what other designers do. Remember what works well, develop a feel for it.

Leave a Reply

Your email address will not be published. Required fields are marked *