Anyone can design a website. Yes, anyone! However, designing a new website isn’t something you merely jump right into. Below features a complete step-by-step guide to web design — from your site’s conception, launch, post-launch management, and scaling.
Learning how to design a new website requires a bit of acquired knowledge, patience, and that unwavering drive that’s essential when effectively learning a new skill.
If you have any of these traits and fancy yourself as an aspiring web/UX designer, or find yourself curious to know just how one embarks on the journey into website design, this one’s for you.
Below details a complete step-by-step guide into designing your new website — starting from your site’s conception, launch, post-launch management, and scaling.
9 steps to designing a website in 2021
Let’s go over 9 stages that you’ll go through when designing a website:
1. Define your website’s scope and goals
Whether you’re designing a website for yourself or a client, it is always necessary to first clearly define the website’s purpose and goals. Having your website’s purpose and goals fully fleshed out is how you’ll obtain an audience and eventually grow. This is the primary reason why websites exist. Companies and brands invest heavily into their social media, branding, content, and website to reach their target audience and build relationships.
At times, clients will come to you with their purpose, goals, objectives, branding, and content complete and ready to be implemented into a CMS (content management system). However, there too will come the occasional clients in need of your expertise to coordinate a complete redesign of their current site, content, and branding. Whatever the circumstance, these clients present you with a blank canvas ready for you to pour your paint of knowledge and good taste to make a masterpiece.
Therefore, we found it all the more necessary to kick off this guide addressing what precedes web design, the defining and planning stage. This is perhaps the most important stage in web design, and thus, it’d be an injustice if we didn’t explore this stage before getting to the core topic at hand.
But, you’re an aspiring web designer, not a UX, content, or brand strategist — so, where do you even begin?
The why
Your purpose is simply your “why”.
There is no point in investing your time and money into a website if you don’t have a clear idea of the purpose of its existence.
Defining your why is in ways defining your “problem, solution, and market,” but for a website. If you’re tasked to design an ecommerce site or an online store, you must first find the problems and solutions for that target audience you’re wanting to connect and grow with and implore why they should go to you?
That said, in answering this question, you’ll pull from methods used in both user experience and business strategy. We’re talking UX questionnaires, project plans, opportunity workshops, listening tours, and so on. These planning and discovery methods are a lot less complex than they sound and so it is worth the effort to see them out.
They will be useful tools to draw from for when you are to build your brand identity and later design your website. Additionally, they will provide you the means to better understand the site’s intended purpose and goals.
The what
Once you’ve defined your why (i.e. your website’s purpose), you’ll then need to address your site’s goals: what will this website set out to achieve?
This is where you’ll revisit your notes taken from the questionnaires, opportunity workshops, and listening tours. Read “between the lines” and examine the responses. Where in your notes are the problem, solution, and market? What is the value?
Your what will allow you to know your how.
It completes your why. It too paves the way for your how as it identifies your audience as well as the possible opportunities to provide value to them (via your purpose).
This is your what, or rather, your goal: find the opportunities within your target audience.
So this leaves us with our final question, how?
The how
This is where you take your discoveries from your why and what and transform them into the form of a website.
Yay! The design process can finally commence!
But first, you need to fine-tune your objectives.
Let’s drum up an example, your client has a small business selling pottery and they’ve come to you to make an eCommerce website to generate more leads (why). After sitting down with them and their team, you all have redefined their purpose to not only sell pottery but create an online community for pottery enthusiasts (what).
You, being the top-notch designer you are, review your post-interview notes and discover another opportunity to connect with their audience, by transforming their pottery online store idea into something more of an online brand. No, better yet, an experience that will set them apart from their competition and create a loyal consumer base. This calls for something more than a website, this calls for content, branding, a color scheme and palette, and more. This will generate leads solely from their online store and SEO (search engine optimization).
This is your how — how you set out to achieve your why and what.
But this poses the next question, how will I go about creating this next-level brand experience?
Where do you draw inspiration from while affirming to your client that your vision will increase leads, validate their investments, as well as your own efforts?
Design begins with discovery and later comes into fruition through sound research.
2. Research to plan your content
You have your website’s purpose, goals, and objectives clear, so how will you present them to your target audience? How do you connect your website to your market?
Planning your content with research
This particular type of web design doesn’t call for UX research, instead, a bit of UI research. Look at you or your client’s competition, what’re they doing and who is their market? How can you attract their audience through a design that is both appealing and memorable?
Related reads: UX vs UI: key differences every designer should know
Research your competition, pull what works on their websites, and enhance these components by looking at the design trends and market research, Attain your inspiration from there. This is the designer’s playbook.
Moreover, be intentional with your copy. Design constitutes both visual and written design elements when you’re a solo web designer. Make sure to study the language used in the sectors and/or industry of your client, or your competition. Leverage these findings as you would do for the visual elements during the research stage.
Creating a mood board
After you’ve gathered your notes and insights from this research, create a mood board. Mood boards are ideal in that they allow you to consolidate your findings and transform them into a more visual representation. They can serve as a foundation for when you build your brand’s identity.
3. Build your website (or brand’s) identity
Brand identity, the final precursor to design. Whether or not you’ve decided to draft up a mood board, you have to build a brand identity.
This is where that above-mentioned patience comes into play. Fleshing out your brand identity is what will distinguish your work from others, appeal to your market, make your site memorable, and generate those sweet leads for yourself or your client.
There will be times where a client will already have their brand identity established and seek your services for implementation in a website builder. Yet, there will be a time where you’ll be sought out for more “complete” services. Therefore, it is a part of the title as a designer to know the important elements of brand identity just as you would know the principles of design.
Color scheme
Color perhaps has the most profound impact on a brand’s identity as it dictates the overall tone and mood for a brand towards the user immediately upon arrival to their site. We all know this — bright colors convey happiness, muted colors convey a sort of seriousness, a lack of color makes focal the information rather than the brand.
There’s a psychology behind color so be keen to use color to your advantage if given the opportunity by your client. A choice color scheme can enhance a brand’s identity and consumer experience by a margin. There are lots of color tools that can help you identify the right color scheme to use.
Related reads: Color theory: a beginner’s guide for designers
Typography
Typeface and font make typography, they are not synonymous with one another. Font is what you use, whereas typeface is what you see.
While the difference between these terms can be frivolous to most, as a designer, it’s something to keep in mind. For example, Times New Roman is a member of the font family Times.
When employed strategically, typography can be used as a creative device to communicate meaning. Not just in your words, but the typeface itself. Typography can shape and build a brand’s identity and recognition to a user. It can hold their attention and convey overall tones and moods, the same way color can.
Some say typography has a more profound psychological impact than color, some believe color is the stronger contender. Whatever ends of the spectrum you fall under, typography is expressive and has a compelling impact on the human psyche.
Imagery
The final visual element of a website’s brand identity, imagery. It can act as a core design element for your brand identity, and content for social media or blogging.
You’ll use imagery to work alongside your color scheme, typography, and copy. Imagery can also extend beyond photo usage; it encompasses a wide variety of elements that come together on a web page. Icons, illustrations, and animations can make up for the imagery on a website. Sometimes this can be grandiose and at times, subtle additions only to be stood out to the designer’s eye.
Imagery is an interesting element as it can also be a simple play with white space on a web page to create a better balance in layout or further highlight a CTA (call to action).
Be sure that the imagery you choose to employ is cohesive with the way the website looks and feels for the viewer. Inappropriate imagery or stock photos that are so frank in their “stock-like-ness” could entirely discount a brand’s identity as a whole (why research is crucial to understanding a client’s desired brand identity).
Functionality
Functionality can quite easily go overlooked, but it can do wonders for enhancing a site’s experience and distinguishing it from competing brands.
For example, one of our favorite web designers, Niccolò Miranda, uses functionality to create hypnotic virtual experiences within a web page. Not only does this establish their signature style as a creative web designer, but it also cements their client’s brands in the subconscious minds of their target audience (and Niccolò brings these stellar experiences to life via Webflow).
Functionality is not a necessity, but when incorporated effectively it can take a brand to new heights. However, not every brand needs customizations and stylizations within their website. Know your client’s brand and target audience before you create your hyper-stylized functional mockups.
Voice
Like imagery, voice is an element that will be employed both on the website and on social media. It has a dual function as content and design element. The majority of companies that will come to you will already have their copy pre-established as copywriting is typically the job of an in-house or outsourced copywriter. Nevertheless, if you are tasked with the job of creating copy, have it be aligned with the personality and style from the visual design elements.
Style & personality
Color, typography, imagery, functionality, and voice each come together to communicate the brand’s overall style and personality. Your job as a web designer is to bring these design elements together to illustrate the desired identity for your clients in the form of a website.
Each of the above-listed elements lends structure to one another just as the discovery and research methods do and will. The exciting part is seeing these elements come together to establish a high-quality user experience for both brand and its users.
4. Create your wireframes and content
After you’ve defined your project scope and goals, gathered your content, and fleshed out your brand, it’s time to conceptualize the layout of your website. It’s time to wireframe.
When you think of wireframes, think in relation to an architect’s sketch. It is conceptual. Its purpose is to give structure and direction. However, it is not the finished product. Wireframes are to be iterated. They serve almost as instruction, and therefore, they are not entirely finite as they are simply blueprints of a website’s or mobile app’s intended design.
However, that isn’t to say that wireframing is nonessential. That is wholeheartedly untrue. Even if you decide to move forward using a template or a cloneable in your chosen web builder, you still need some sort of direction or vision to allow you to conceptualize and visualize the content and layout of your website’s design.
Whatever the medium you use in approaching your wireframe design, it is in your best interest to at the very least have a sketch design (or wireframe design using your preferred design tool, think Figma, InVision, Adobe Xd, etc.).
Optimize your content post wireframing and prior to design
We’re almost there, curb your excitement for just a bit longer! We want to address the potential SEO opportunities that can arise if you optimize your content before you set off designing.
Recall that a website exists to generate leads and convert those leads into new clientele. This is achievable in theory, “make a site and people will come.” yet there are over 4.45 billion websites indexed in Google alone…
Where does your website fit? Better yet, how are websites even found and listed on the first pages of Google or any other search engine for the matter?
Simple, by pre-aligning your site’s copy, content, and pages (i.e., on-site SEO) to be in accordance with your intended off-site SEO.
Upon finalizing your brand identity, sit down and organize a sitemap (or list of all the intended web pages that are to be included in your website). Now list out all the content and copy within those pages and then the keywords and keyword phrases that would correlate with said content and copy. Additionally, be sure to look at your site’s URLs and alt images, and specify the keywords that could be used within their meta titles and descriptions.
Keywords? How do I know what keywords to use for my website and content?
Research, of course.
What’re the phrases and keyword combinations associated with your competitor’s websites and content? What would you type to find your content?
What language does your target audience use, specifically, what’re the trends saying in Google?
These inquiries are merely a small fraction of how and where you can seek out SEO opportunities for your new website and web content. There still are many other facets of SEO you may have to address during your design (depending on if your client has an in-house SEO division or is outsourcing an SEO expert or agency) but that’s for another article.
Take the time to pour into this process of optimizing your content before diving straight into the design. Webflow’s Designer platform makes doing so a fairly simple task (especially in comparison to competing web builder platforms), however, if you do not visit this task until post-launch, Webflow’s Editor also allows you to easily optimize your content without having to open up the Designer.
Whether or not you’ll be asked to optimize the website and content will always be contingent on the client. Again, some may have pre-outsourced an SEO expert, some may have an in-house team, and some may neither. Nevertheless, it is in good faith for you to be knowledgeable on the basic principles of SEO as it is a component of web and UX design.
You’ll thank yourself post launching.
5. Pick your preferred web builder platform
With your identity determined and content gathered, you can now move onto the next stage, choosing your web builder platform. WordPress, Wix, Squarespace, and Shopify are common platforms used for web design, web development, CMS, and eommerce. However, it is worth noting that each of these platforms has its limitations and shortcomings. These in which pose a significant hindrance and eventual annoyance for most designers.
WordPress
WordPress is best suited for blogging. However, it can function as both a static and dynamic CMS upon purchasing WordPress themes and plugins to increase its functionalities but comes at a pretty penny in doing so. Management and maintenance can quickly become cumbersome, ask any designer who has chosen to leave the platform for Webflow and they will give you a full rundown.
Related reads: 5 reasons a WordPress user moved to Webflow
Wix & Squarespace
Wix and Squarespace can be limited to their platform’s themes or the user’s abilities to manipulate the script of their chosen theme. Oftentimes sites made with these two platforms lack originality. This inept attempt at authenticity is evident to any brand’s target audience. Users and consumers alike are quick to detect an apparent “wholesale stock product-like” excuse of a website. While they may still buy your product in that one-off instance, discovering a competing brand that’s both genuine and appealing is only a mere Google search or Instagram post away.
Shopify
Shopify is great for ecommerce but again, it is too limited in its ability to customize its themes to the user’s wishes. Sites made with Shopify too can fall into that trap of being seemingly homogenous in their UI and functionality. And as a result, a brand’s identity gets muddied, lost from a lack of originality due in part to the web builder’s limitations and/or the designer’s not knowing of code — which is no fault on the designer, a designer’s job is to design, a developer’s job is to develop.
Webflow
If you can manage to design within the barriers proposed by these platforms, more power to you. However, for those who wish to design to their heart’s contentment, Webflow is the platform. With over two million users, and catering to whatever design whim that may come, the platform leans into your artistry, ridding designers and artists alike of the impositions brought about by the former above-mentioned platforms.
Webflow’s design teams took all the best features from the more common website builders and content management systems and streamlined them for professionals and aspiring designers like yourself. Dubbed, “the modern way to build for the web”, the platform is just that, a modern way to build, launch, and scale your brand for the web.
6. Create your high-fidelity mockups in Webflow
Before we can dive into Webflow’s interface and functionalities, it’s important to understand the rudimentary structure of websites (especially if this is your first venture into web design).
Mini crash course on web design
Websites come in three different forms: HTML, CSS, and databases.
For brevity’s sake, HTML (hypertext markup language) is the content on the webpage and structure of this content on the webpage, CSS (cascading styles sheets) is how the content is styled and presented (think fonts, colors, positioning, etc), and databases are where content is stored.
Typically, you need code to transform these elements into a webpage and later an overall website as well as a database to store this code. However, Webflow does this for you by merging these components in the Webflow Designer and Editor.
Note: Requesting a website onto the internet also requires a web server, browser, host, DNS, etc. These are too pre-incorporated into Webflow’s platform.
Build with the Designer
Now, it’s finally time to start designing. If you’ve followed the advice laid out in this guide through fleshing out your website’s purpose and identity first, (not for “rule’s sake”, but for the sake of your own), the “fun” can finally commence!
To kick off this process, sign up for Webflow if you have not already. Webflow provides the platform free of use — no trial or credit card information for setup needed. Simply go online, click get started, sign in with Google or your email and you’ll be redirected from there.
*redirecting*
Redirected!
Okay, let’s open up the builder, or rather, The Designer.
A blank canvas. A sidebar of components. Another sidebar of the components within a component after selecting a component. And now classes and layout settings and more options within those classes and layouts? Hm.
Where to begin…
With Webflow, you build visually. Those components you see on the left-hand sidebar are what would normally be realized via CSS, HTML, or Javascript. Yet Webflow is codeless, so if you’re wanting to begin building simply drag and drop your chosen component onto the canvas. Upon dragging your component, you’ll see an option for further modifications (i.e. the components within the selected component) on the right-hand sidebar. These are classes within the component and they are where you can stylize the selected component.
But let’s backtrack. With Webflow you can choose to begin your design from scratch, use one of our hundreds of templates, or a clonable.
Therefore, instead of asking oneself where to begin, the question is rather, how do you want to begin?
Starting from scratch
This is quite literally starting from scratch. Imagine this option as a blank canvas and the tools within the sidebar are your paint, primer, and so on.
Starting from scratch can be intimidating for the novice designer as you’re presented with a blank canvas that can be transformed into anything, yet at the same time, you have nothing to draw from. Oof.
Webflow University also has a free tutorial on the basics of Webflow available. It’s a 2-hour crash course to help you get familiar with the platform’s interface and features before pouring your metaphorical primer and paint all over the canvas. If you’re wanting to play around with some of the features within the Designer’s interface such as its drag and drop components, do so as you’ll be able to familiarize yourself with the “tip of its iceberg”.
But for those who learn by having a more practical origin to build from or some guidance to serve as a means of getting in their desired direction, using a template could be a more viable starting point.
Related reads: Webflow tutorial: the absolute beginner’s guide
Using a template
Whatever web builder platform you decide to use to build your website, templates are wonderful ways to dive headfirst into understanding the platform’s interface and capabilities.
And luckily, Webflow has over 500 responsive website templates that are already optimized for all screen sizes and mobile devices, from businesses to portfolios, blogs, ecommerce sites, UI kits, landing pages, and so on at your disposal.
As a novice, maybe it would be a great starting point to choose from one of our free templates and begin experimenting and playing with the Designer’s interface from there. Click your desired template and preview it in the Designer. It’s not as intimidating anymore, is it?
In hovering over each element or div box, you can come to grasp how the interface in the Designer functions. Moreover, if you’re familiar with design platforms from Adobe, for instance, InDesign or Photoshop, you should be able to navigate through the interface with a bit of ease.
Play around.
You’ll be able to see in the left-hand sidebar the different features from adding elements, layouts, pages, changing the site to have the functionalities of an eCommerce site, edit the different assets pre-installed in the template, and even add onto to it with your own the CMS collections. The more you play around in the interface and browse the free tutorials available on Webflow University, the more the Designer’s interface will make sense and you’ll be designing with limitless ease in no time. So play!
This is why Webflow was created.
Tip: If you go about using a template (or a cloneable), in the assets folder on the left-hand sidebar, you can tweak the content to align with the brand identity of your website. You can also add additional content via the CMS collections folder which is too located on the left-hand sidebar.
Using a cloneable
Cloneables are wondrous tools brought to you by fellow Webflow web designers. Not to be confused with a template, cloneables are similar in their purpose, yet they are not templates.
Choose whichever cloneable that grabs your eye and click open in Webflow. You’ll be prompted just as you would with a template, to the Designer. The same thing applies here.
Again, play around.
Explore the components on the left-hand side and their customizations on the right-hand side. Hover over the div boxes on the canvas, click and you’ll be prompted on both the left and right-hand sidebars. Play with the alignment, spacing, size, what have you. Drag and drop then div box elements already on the page or add in new elements you see on the left-hand sidebar.
Play as you would if you started from scratch or used a template, the only difference here is that when you’re finished and contempt with your desire and are ready to publish, click “clone” and you’ll be able to make this design your own.
Yes, again, it’s that simple.
And if you’re still stuck for whatever reason, you can always find inspiration from the Webflow Showcase. The talent is of abundance!
Tip: Whether you start from scratch, use a template, or a cloneable, if you click your cursor on the camcorder icons on the bottom left-hand sidebar, you’ll be shown video tutorials detailing all that you need to get started in understanding the features in the Designer.
Tip: Before you click publish, click the check box icon that’s located right above the magnifying glass icon above the camcorder and you’ll be able to run an audit on your website to ensure there are no issues in the site’s usability and performance.
7. Conduct user testing
Don’t be dismayed by the term user testing. While it may seem like much or an added extra step, it’s not. User testing is simply the method to ensure that you’ve dotted your I’s and crossed your T’s. It’s that extra assurance that post-launch, your website’s interface is sufficient in its design as well as its user flow. Even if the flow isn’t as complex as some UX projects, it will do you well to conduct this essential testing.
Take the time to show your website to your peers or friends. Record their insights and ask questions for feedback. This can be either moderated or unmoderated depending on your liking and the complexities of your website. In context to this article, perhaps a simple peer-to-peer review of your website is most fitting. Nevertheless, use the method that you find to be the best suited for your website.
8. Publish your website
Your design is complete and it has been approved by your peers, what’s next?
If you’re using Webflow as your web builder platform, click publish.
Yes, you read that correctly, click publish.
Webflow is a production-ready website designer, CMS, and hosting tool, with a built-in database and hosting so yes, go ahead and click publish. If you haven’t done so already, you’ll then be prompted to buy or register your domain name. Next, you’ll be prompted to select a plan or client billing option if warranted.
And there you go, your new website should be live.
Yes, it’s that easy, as it should be.
9. Manage, scale, and iterate accordingly
Need to iterate the content on a particular web page? Have new pages to add to your client’s site for their new product lineup launching next week? Or want to manage or automate your SEO?
The Editor brings your content management made easy. Any changes in content, tweaks in copy, blog entries, SEO additions, updates, and automation can be achieved and published in seconds without the need for any plugins, ongoing maintenance, or site iterations.
You can share these capabilities with any team members, clients, or colleagues without the worry of them shattering the site as the Editor is separate from the Designer. Yes, you can exhale.
The Webflow Editor was designed with the end-us er in mind, i.e. your clients and/or colleagues. The UI is simple, digestible in one sitting.
What was that one book title on design and usability by Steve Krug…
Oh yes.
Your clients and/or colleagues are presumably uninterested in understanding the nuance and complexities of the Designer as it’s possibly irrelevant to their workload. The design team at Webflow kept these workplace realities in mind, which is why we have the Editor.
Project handoffs, iterations, and overall management are supposed to be without headache or hiccup. There’s no room for unforeseen learning curves or disillusionment.
And yes, you can always go back to the Designer and execute any “heavy-lifting” iterations that the Editor won’t resolve.
The modern way to design and build for the web
Anyone can design a website. I wasn’t being hyperbolic or facetious. Be it static, dynamic, eCommerce, for businesses, agencies, portfolios, blogs, forums — whatever you or your client’s heart desires — anyone can design a website and they can do so beautifully by using Webflow.
Web design should be a free and compelling creative process. One without bounds, just as it is for graphic design or illustration, and with Webflow, it is.
Webflow is a designer’s playground, it’s your playground!
This platform is exciting in that it encourages creativity by providing designers of all backgrounds, knowledge, and experience the tools to explore the ends of their imaginations and impress their clients in the process. It is the platform to establish yourself as a professional web designer, grow in your knowledge, scale your reach in clients and uncover a network of other aspiring and professional designers.
Webflow makes web design fun again. Its limitless abilities foster the notion in which anyone can build a website without having to compromise their artistry due to a dated, bland, or convoluted web builder.