Blog
Conceptual design: What it is and how to build it

Conceptual design: What it is and how to build it

Bring your brainstorming to life the right way. From a pen and paper to the perfect prototype, here’s everything you need to know about conceptual design.

Conceptual design: What it is and how to build it

Bring your brainstorming to life the right way. From a pen and paper to the perfect prototype, here’s everything you need to know about conceptual design.

No items found.
Written by
Webflow Team

Every design starts with an idea. But how is that idea translated into a tangible piece of work?

That’s the job of a conceptual designer.

Graphic and web design are at the forefront of a brand’s visual communication. But before executing a design, conceptual designers must create a blueprint that maps the initial idea to the final product. To achieve this, it helps to understand methods for turning a captivating idea into a tangible design.

Let’s explore conceptual design and how to incorporate it effectively into your web design workflow.

What is conceptual design?

Conceptual design creates a strategy to transform a concept or idea into visual media. It’s the underpinning of a successful design process, and no project can start without it.

Conceptual design relates to concept art, or artwork expressing a creator’s idea of how a completed project may look. Concept art is frequently used during a movie or video game’s preproduction to act as a guide for the creative team. Similarly, in the early stages of the web design process, conceptual designs help create an overarching blueprint of a website before moving on to granular specifics like color and typography.

What are the steps to build a concept design?

A conceptual designer’s primary objective is to creatively materialize a client’s ideas. Each designer has a different creative process, and it’s important to develop your own. When you’re getting started with concept design, following a specific process can ensure you don’t miss any steps.

Let’s look at a few essential steps to design a concept.

1. Define the problem or service required

The first thing you must do before starting any design project is determine why the project is required. What is the project’s purpose, and what problem does it intend to address?

Start by creating a problem statement — a brief description of the issue you want to address.

For example, say your new client is a toy company that wants a website to advertise its latest superhero action figures. However, the company has a policy of avoiding words related to violence and destruction — like “explosion” or “boom” — as part of its branding guidelines.

A problem statement for this client’s project could be “Superhero toys appeal to children but often align with violent imagery that’s inappropriate for young demographics.”

As a conceptual designer, your job is to outline a website that can successfully advertise the toy and address the problem statement while maintaining the client’s request to use the right tone.

2. Understand the client, brand, and audience

Once you have a problem statement, identify the client, brand, and audience. Who is your client? What is their mission? What is the target audience? Understanding these factors will help you form conceptual designs that stand out from the competition and create a final product that uniquely appeals to customers’ interests and values, carving out a space for your client in their industry.

Let’s use the example of the toy company again. This client’s brand includes guidelines and policies of inclusivity, accessibility, and nonviolence because they aim to cater to parents whose parenting style aligns with the brand’s values.

These parents are the audience, so you need to study their purchasing patterns, behavior, and preferences before designing a website. It’s the conceptual designer’s responsibility to incorporate the client’s branding to satisfy both the client and their audience.

Unleash your creativity on the web

Use Webflow's visual development platform to build completely custom, production-ready websites — or high-fidelity prototypes — without writing a line of code.

Get started for free
Unleash your creativity on the web

Use Webflow's visual development platform to build completely custom, production-ready websites — or high-fidelity prototypes — without writing a line of code.

Get started for free
Get started for free

3. Research competitors and the industry landscape

Conceptual design is rooted in research. Find out what competitors are doing and how they design their websites. Do they achieve their goals? Are there any missing elements? Is there a feature you could use as inspiration for your design?

Take the time to use a competitor’s website and jot down notes about your overall experience. You can use various parameters like user experience, readability, and ease of use to gauge the website’s performance.

Researching competitors also offers insight into industry norms. That way, you can see what doesn’t work to implement better strategies for your client’s business.

Look into the work of other designers. Use their work to your advantage — you may come across concept designs with themes you had never considered. Compile these into a mood board and use it as inspiration and a visual reference point throughout the design process. As you move from concept to final designs, these points of inspiration will help your whole team execute your vision. This process will hone your eye for detail and help you improve as a designer.

4. Brainstorm with your team

Talking out your ideas can often help pull them into reality. This is where brainstorming comes in.

Brainstorming is a process in which team members exchange ideas. Mind mapping and free association are two excellent brainstorming methods for conceptual design. Start with a base word or phrase and write out words associated with it, either in a list (free association) or branching out around the base word (mind mapping). Continue listing or branching off of new words until you reach strong and specific ideas to inspire your design.

The purpose of this exercise is to group related thoughts into a singular statement that expresses your concept and what you’re attempting to achieve. For example, “happiness” might be followed by “smile” and “laugh.” From a design perspective, you can represent these words with bright color combinations, bold fonts, and maximalist designs.

5. Design and sketch concept drafts

Concepts must eventually evolve from abstract thoughts to visual representations. Conceptual designers use sketches to achieve this. This can be done with a pencil and paper or in a digital medium, such as Procreate.

The objective is to spill your thoughts onto the paper or screen by creating as many visuals as you can fit on a page. Sketch quickly and let your ideas flow. Avoid getting caught up in the minute details — you’re only drawing tangible visualizations of the concept. This isn’t a finished product but rather an idea of what the final design might look like.

This stage is crucial. Brainstorming may give you a lengthy list of filtered words, but the concept’s credibility is ultimately determined by how it appears on the screen. Plus, you might even be surprised when a sketch turns out to be better than you imagined.

6. Develop and refine your prototype

Once you’ve created rough sketches that you’re happy with, it’s time to create a more detailed representation of your design. This is called the prototype or mockup — a model that others can examine and provide feedback on. It doesn’t have to be perfect — it’s a blueprint, not a final product — but it should give your client a strong impression of what the finished design could look like.

After receiving approval from project managers, clients, and stakeholders, make the necessary changes and move forward with the final product. If the feedback isn’t positive, revisit the previous steps to design better solutions. This could take multiple iterations, but that’s typical for any conceptual design process.

Looking for web design inspiration?

Building a tangible product out of a mere idea is a challenging process. Luckily, we have some of the best references to inspire your next design project — and the tools to create it.

Our no-code visual development platform is the perfect place to build a stunning site. Not sure where to start? Begin by scrolling through popular sites created in Webflow. If you see something you like, click the “Find similar templates” button and get building. Soon, your idea will go from a picture in your head to a live URL.

Last Updated
January 9, 2023
Category