How do design a website

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. 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?

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? 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.

Moreover, be intentional with your copy. Design constitutes both visual and written design elements when you're a solo web designer. Leverage these findings as you would do for the visual elements during the research stage. 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.

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 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. Typeface and font make typography, they are not synonymous with one another. Font is what you use, whereas typeface is what you see. 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. 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.

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 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. 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. 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. It is conceptual. Its purpose is to give structure and direction. However, it is not the finished product. Wireframes are to be iterated. That is wholeheartedly untrue.

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.

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.

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? 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. 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. 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. With your identity determined and content gathered, you can now move onto the next stage, choosing your web builder platform.

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. A portfolio website to showcase your art.

A business website to manage and grow your business. A resume website to grab the attention of potential employers. A blog to share your knowledge with the world. An event website for weddings, parties and company events.

A photography website to display and sell prints. A fitness website to book new clients. A restaurant website to help with online orders, delivery and payment. As you set off on this journey, keep your overarching purpose in mind and think about how the design will help achieve your objectives.

For example, if you want to sell your photos online, try displaying your work in a portfolio format and including an online store where you can sell prints.

If you need help envisioning a design that meets your goal, browse through these outstanding website examples for inspiration. A website builder also known as a CMS is a platform on which you can design, personalize and publish a website without any knowledge of coding.

There are dozens of platforms available on the market. Not sure which one to use? Here are a few Wix advantages:. Diverse pricing models : Creating, publishing and hosting your website is totally free, for as long as you wish.

If you want to upgrade your online presence with some tailored features, Premium packages are also available. They include everything you need to succeed online, from professional templates and web design features, to a custom domain name.

One option is the Wix Editor, whose drag-and-drop technology gives you complete design freedom. Beginners might also enjoy using Wix ADI Artificial Design Intelligence , the first artificial intelligence platform that creates websites for you. Professional solutions: Because your website is the hub of your online life, Wix puts all of the professional solutions you need in one place. Ready to design a website?

Go to Wix. You now have your account, from which you can create as many websites as you wish. However, another option is to use a template, which is a pre-designed layout created by a professional designer. Wix offers an extensive library of free website templates. Start by browsing through the hundreds of options until you find a layout that you love.

Then, you can make it your own by fully customizing all its elements and removing, adding or changing details like text, images and color. Of these designs, you can pick between a multi-page template and a single-page one.

However, with less content to display, you may want to go for a one-page website. This trendy option is a popular choice for landing pages, event websites and other short-form content sites.

A good way to start is to look at website examples that got it right. Grab a pen and paper, and jot down ideas you like as you browse through some of the best website designs. There are plenty of social media platforms dedicated to design inspiration, such as Pinterest and Dribbble , so make sure to check those out too. To put it in simple terms, your domain name is your address on the internet. Registering your domain name is critical for online success.

Websites with a customized domain are automatically perceived by internet users as more professional and trustworthy. When chosen wisely, a domain name also helps search engines like Google and Bing understand what your website is about. This is important because it helps bring in more traffic to your website.

Now, how do you choose a domain name for your brand? To make it memorable, keep it:. Short: The longer it is, the higher the chances of visitors misspelling it. Simple: Avoid symbols, special characters and numbers. Professional: Your domain name should incorporate your own name or your business name, to avoid confusion. Evocative: Hint about what you do into your domain name by incorporating words that are related to your business. You can find out if your dream domain name is available by using this domain registration tool.

Pro tip : Picking a domain name also means using the right domain extension. This includes your images, text, logo, videos, and more. Wix comes with a wide selection of media features, including a library of over one million free photos from our partners at Unsplash, Vector illustrations , and interactive videos that are exclusive to Wix. While having plenty of material on your website is great, remember to always put quality over quantity.

Finally, make sure your content is fully branded. Think of your website as an online persona - everything from the written content to the colors and fonts you use should reflect who you are or what your brand identity is. Pro tip: New to the marketing game, or feel like you could sharpen up your brand language?

From creating a logo to defining your tone of voice, this guide explains everything you need to know about building a solid brand identity. Every business is unique, and so is every website.

Nevertheless, there are some traditional sections that your site visitors will expect to see. Homepage : You have one chance to make a good first impression, and your homepage is it. It should clarify who you are and what you do, and serve as a starting point for visitors to navigate through your site. Through a combination of expert research and thorough testing, we can now reveal the best options for designing your very own site.

Website Builder Comparison Chart — Take a side-by-side look to compare key areas. Ecommerce Platforms Comparison Chart — Easily identify which platform works for you. WordPress gives you total control over the look and feel of your website, and is technically free to use. All cater to different needs, but for a general overview, take a look at our quality scale below:.

Wix is generally regarded as the best website builder on the market. Its easy to use drag-and-drop editor gives you total creative control, allowing you to add in all your content and position it wherever you see fit. From thoroughly testing the platform ourselves, we can confirm Wix lives up to the hype. Have a look at our final research scores and see for yourself:. We also arranged for regular people, just like you, to sit down with Wix and attempt to design their own website.

These volunteers were blown away by just how quick and easy Wix was to use, as well as the sheer choice of features on display. Wix is the best website builder on the market. Sign-up to its free plan and see what you make of it. How to use Wix — A step-by-step guide for beginners. Squarespace Squarespace Pros Squarespace Cons Best quality templates in terms of design and flexibility Limited number of price plans Best quality features of any builder on the market Not totally beginner friendly Full customization control without the need for coding Squarespace is a website builder that oozes class , and comes with a glossy, premium feel.

Squarespace prides itself on its templates. Their cutting-edge designs make them perfect for anyone in a creative field, such as photographers, artists, or graphic designers.

Squarespace also comes with an array of quality features. Here you can see how it scored in our research for all the major categories:. I think a lot of that is down to how well the template I chose is designed. Squarespace offers a day free trial.

Discover why creatives love it so much. How to use Squarespace — Our simple handbook for using Squarespace. Squarespace Pricing Review — Which plans offer real value for money?

Our users who tested Weebly really liked how it helped them structure their site, and how it showed them that anyone really can build their own website:.

Take a look at what all the fuss is about. How to use Weebly — 7 steps to getting your Weebly site online. Wix vs Weebly vs Squarespace — The ultimate comparison. Some are purpose-built just for ecommerce, while others like Wix are website builders that have ecommerce functionalities.

Shopify stands head and shoulders above its peers as the best ecommerce platform. It has a range of themes which are all designed with your products in mind, and more sales features than you can shake a stick at. Where Shopify really excels, though, is away from your website. Shopify is slightly different to website builders in that you predominantly work from a dashboard, rather than an editor. How Does Shopify Work? Shopify Pricing Review — Is Shopify worth the investment? Anyone who sells products on the side could benefit from Wix.

However, you may also want to sell merchandise, such as tour tops, albums, and branded instruments. Wix makes it easy to either build an online store from the off, or add in a store section further down the line.

Wix vs Shopify — Learn more about the difference between the two platforms. One thing BigCommerce has over Shopify is the amount of built-in features it has. With Shopify, you may end up spending far more than just the standard monthly fee to install a whole bunch of apps — many of which are free to use with BigCommerce.

On the flip-side, BigCommerce is undoubtedly harder to use than Shopify. BigCommerce vs Shopify — Read our comparison as these two titans clash. A template, sometimes referred to as a theme, is the layout of your site.

Think of a template like the structure of your house — it forms its basic appearance, before you fill it with all your belongings. Most platforms will offer you a range of templates to choose from, which come pre-filled with example content. Templates are usually divided into industry categories, making it super simple to sift through them and find ones that are relevant to you. Each category will have templates with built-in features that are relevant to that industry, saving you the time and effort of adding them in later.

Most of these will already have a contact form, menu page, and contact details built into the template, as they are all related to what a cafe website would require. All templates can be previewed before you begin editing, so you can get a clear idea of what it looks like — and, more importantly, whether it fits your needs.

Research suggests that website users find information faster by scrolling, rather than by flicking across different pages. So, if your website just needs some basic information, it may be worth considering a one-page template. The time has come to start designing your website!

When designing your site, you should think about how everything you do relates to your overall brand. Most brands have one dominant color, then two or three secondary colors. Blue is the most popular color , with one third of the top brands using it in their logo. If you want your site to be in-keeping with modern trends, then vibrant colors are the way to go. How to Make a Logo — The 4 best online logo makers. Font Style Similar to color, the font you opt for has a big impact on what people think about your website.

Naturally, white-collar businesses will want to use classic styles of font. Fonts like Arial and Helvetica are synonymous with professionalism, and therefore make sense when discussing serious matters. A more fun or playful brand, however, may wish to explore more abstract fonts. As a general rule of thumb, you should avoid using Comic Sans font. Visual content is useful for increasing clicks and engagement, but on a more basic level, images simply stick in the mind.

That said, be careful not to overload your site with images. Lots of high-quality images might look great, but they can slow your site down. Where to find professional images for your website. Free image editors we recommend So, now you know what you want to add to your website, there are two things you need to think about: positioning and optimization.

Optimization, meanwhile, is the process of tweaking content to help it rank higher on search engines, such as Google or Bing. In simple terms, this means that website users will scan a page in a shape that resembles an F. This picture is taken from a Neilson study , where the group tracked the eye movement of readers on a web page. This is why navigation bars on websites are nearly always displayed across the top of the page.