Website Design Concepts: How to Design Concepts in No Time

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.

Conceptual design is a framework for presenting the main idea of a project and a strategy for executing it visually. With a quick outline of what we are planning to do when creating designs for a website, you can demonstrate the look and feel you’d go for, and get feedback early on.

This way you can take into account important steps that may otherwise take a lot of time to figure out. Because of the quick production rate of design concepts, it’s possible to share a lot of variations in almost no time, and once confirmed, polish them to perfection with the marketing team.

What Is Conceptual Design?

First things first, let’s invest a bit more time in defining conceptual design.

Concept art is the name given to an illustration (often used in the preproduction phase of a film or a video game) that expresses the artist’s vision for how the completed product should look. The conceptual design begins early in the design process, generally, before precise color selections or illustration styles are decided. The only tools you’ll need are a pen and paper.

The root word of “conceptual design” is “concept,” which refers to the design’s main idea and purpose. This is opposed by “execution,” which refers to the implementation and form that a design takes in the end.

Conceptual Design vs. Detailed Design

Conceptual design focuses on the “big picture” and overall look, feel, and atmosphere that a project will evoke. The detailed design phase refines the conceptual design, working out the kinks and adding specific details to make it ready for execution.

For example, let’s say you’re designing a website for a new Italian restaurant. In the conceptual design phase, you would focus on developing the overall theme and visual style of the website. What colors will be used? What type of images? What’s the general layout going to look like?

However, in the detailed design phase, you would take all of those concepts and start fleshing them out. You would choose specific colors, fonts, and images. You would create wireframes that show the exact layout of each page. And so on.

The important thing to remember is that design concepts come first! You need to have a strong foundation to build upon, or else your detailed designs will be all over the place.

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 8 GB 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.

Learn The Mechanics of Your Tools

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:

The interface of Adobe XD is simple, there’s nothing unnecessary. 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 – ellipse
• 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 design 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.

Of course, the design 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.

Example

Here is an example of a design for an imaginary project with 0 specs, the goal is 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 that 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.

However, this design concept 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. The 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 spacing.
• Think of how you can keep the look and feel consistent on the whole site.
• Do 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 about 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 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 can 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 a 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 burn out soon.

Visual Library

The final part of a design concept 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 a 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 a 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? The same challenge can be put on 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 components you can place in a footer? Will it be 60px high or as tall as the viewport?
• Comments – You can literally go for a 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 XD is a good fit for your work – it doesn’t stand in your way. The limited amount of tools, while making choices less, actually increases productivity.

Bottom Line

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 a 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, and develop a feel for it.