Create a project plan
First things first: take a step back and create a design plan. Trying to learn how to design a website without a plan would be like painting straight onto a canvas without any rough sketches.
Before you start dreaming about video galleries and fancy call-to-action buttons, ask these four questions:
- What kind of brand do you want to build? Grab a pen and paper and write down adjectives that describe your brand.
- What would success look like? Are you trying to make sales? Promote a brand? Or just have a bit of fun?
- What kind of features do you need? These could be newsletter sign-up and social media buttons. When you choose a website-building platform (step 2), you need to know it has the features you want.
- Who is your site for? Think about your future audience. What will they want to find?
Your site should reflect the answers to these questions. For example, if you need a formal and professional site, you’ll want serious colors like white and grey. We’ve got more on this later.
Going through this process also helps you avoid designing in the wrong direction.
Next, conduct competitor research. Look at sites similar to your’s. What do you like? What do you not like? Get some inspiration. This is a key step in learning how to design a website.
My Answers
1. eCommerse site which attracts customers and allows for purchasing of bagels
ease of use, visually appealing, functional
2. Site that would generate xxx sales, show up on searches, scalable for many users
3. Collect customer information, ability to show product any prices, ability to take orders from site, explain cumpany, have customer service feature
4, people who like bagels and can't get them easily
My Answers
1. eCommerse site which attracts customers and allows for purchasing of bagels
ease of use, visually appealing, functional
2. Site that would generate xxx sales, show up on searches, scalable for many users
3. Collect customer information, ability to show product any prices, ability to take orders from site, explain cumpany, have customer service feature
4, people who like bagels and can't get them easily
Before you start designing your website, you need to pick a platform to build your site.
The typical choice is between a hosted website builder like Wix or an open-source, code-it-yourself option like WordPress, or a full service web design company like Exai.com.
Homepage: decide on layout and menu navigation
Once you’ve picked your website-building platform, it’s time to focus on your navigation and layout. This is the first creative step of how to design a website.
Your homepage is like your shop window, so it’s pretty important you take the time to get it right. It should leave visitors in no doubt what your site is about.
Good websites are more than just a pretty face. They have to work. A good website delivers style, but also substance.
An effective homepage makes it easy for visitors to navigate around your site. It should be clear what action you expect the visitor to take. In this section, we’ll cover two aspects of the homepage: the layout and menu navigation.
Homepage layout
On a simple level, a homepage has two parts: above and below the fold. When laying out your homepage, you need to think about what to put in each section.
- Above the fold = the top half of the page. Content placed here should be important because your visitor will not have to scroll down to see it. For example, one sentence summarising the value your site adds and a bold call to action linking through to your top conversion point (a newsletter sign-up, for example). Make the language on your CTA very specific and action-driven.
- Below the fold = More in-depth content that supports the above-the-fold material. For example, a ‘benefits list’. If you’re an artist, this list explains why a visitor should use you. Other secondary content could be trust indicators like reviews.
A word of warning: often with learning how to design a website, less is more. Don’t let your site become cluttered or overly complicated. Communicate the core message of your site.
What about logo positioning?
If you’ve got a logo, you have several options when choosing where to put it. If your site is focussed less on brand and more on products or services, place your logo on the same line as the menu bar. If you’re more focussed on brand, try placing the logo in the centre below the menu bar. You’ll get more space, but risk distracting from the commercial messages in your navigation.
If you don’t have a logo, here’s how to make one.
Homepage navigation
The navigation bar is the menu visitors use to navigate your site. Here’s one we made earlier on Shopify:
Choose a theme / template
To populate your homepage you will need to choose a template (also known as themes).
Website builders have a great range of stylish templates for you to choose from.
Plus, they do a lot of the selecting for you by filtering templates by category. You can select a theme that matches your industry.
Most platforms offer a range of free and paid templates. Experiment with your chosen template by adding different features and elements.
With some paid templates, you may not be able to customize, so view the demos of multiple templates before picking one.
Remember, you’re unlikely to find the perfect template, but a systematic approach can help you whittle the choice down from hundreds to a small selection.
Most templates will come with a pre-designed header. They can contain images, galleries and even videos. Don’t jump for the flashiest option. Select a header you can work with, that will communicate your site’s core message. There are lots of different types of header. Each is good for different types of site.
For example, static headers with no content are good for sites that rely on high-quality images to attract visitors.
But static headers take up space, so don’t use one if you rely on text to explain what you do.
The safest choice is a static header image with content. You get key elements including:
- Headline
- Main paragraph
- CTA (buttons or text links through to a main conversion point, for example a checkout).
- Supporting image.
More complex sites that advertise multiple products or services might want a slideshow header.
Choose a color scheme
We bet you didn’t know that 85% of shoppers say color is a key reason they buy a particular product, according to KissMetrics.
So it’s no surprise that choosing a color scheme is a big step in how to design a website.
This step is all about helping you come up with a winning color strategy for your site. A good color strategy involves three things:
- A dominant color combined it with a complimentary color
- A background color
- A consistent color scheme across the site
Your dominant color should be the one you want people to remember. If you have a logo, use a primary color from your logo as your dominant color. High-value parts of your site should be designed in your dominant color.
Understand the meaning of colors before choosing one. Red, for example, evokes passion and urgency. It attracts impulsive shoppers and is effective for fast food and clearance sales. There’s a full breakdown of different colors’ personality in our full-length color guide.
Learn what each color represents and make sure the one you choose reflects your site.
Picking a kaleidoscope of bright, happy colors if you’re an online mortgage advisory service would be like turning up to a funeral in bright Hawaiian shorts. It’s just not appropriate.
Keep your background color simple. You don’t want to distract from your site’s content. It’s why information-heavy sites, or sites that promote products or services, often go for a white background.
Complimentary colors can be used across your site to jazz up key areas. Experiment with different colored outlines to make buttons and subtitles pop out.
Whatever color palette you choose, it’s very important to remain consistent. Don’t have different color schemes on different pages. Your visitors will just get confused.
Add your content: fonts, images and content
Let’s talk about your site’s content. Fonts, images and copy are the nuts of bolts of learning how to design a website. In this step, we’ll tackle them one by one, starting with fonts.
Fonts
The golden rule of fonts is: never sacrifice readability for style. What’s the point in a great font if no one can read the words?
Like your color scheme, your font choice also has to be consistent. Make sure page headings across the site are in the same font.
Here’s a general typography rule of thumb: show restraint and use no more than two different fonts. It’s the same when it comes to font colors. One or two font colors will do fine.
You can be more experimental with CTA fonts. It makes sense to draw your visitor’s eye to your core buttons.
And again, like your color scheme, your font has to reflect the tone of your site. Different fonts represent different things. Times New Roman is traditional. Calibri, clean and uncluttered. So don’t pick Comic Sans if you’re a professional services site.
It’s not just about the font, it’s also about the space between lines of text. The perfect line height is 150% of the font size you’re using.
More Font Information:
Content
Your site’s content should be more than just window dressing. It has to serve a purpose and encourage your visitor to complete an action.
Make your prose snappy and eye-catching. There are few things more unattractive on a website than large blocks of text. If you want to make a section of content stand out, try surrounding it with white space.
Also keep SEO in mind. SEO stands for search engine optimization. It’s the practice of getting traffic from search engines like Google. A big part of SEO is writing targeted content.
So if you’re selling socks, for example, you would add content targeting people typing sock-related terms into Google.
Use Google Keyword Planner as a basic entry point to SEO. Also use Google Trends. Make sure keywords you want to rank for (this could be a product, for example) are included in H1s and H2s, body content and meta descriptions.
Top Tip: When adding contact information, use Schema Markup. This is what Google uses to pull your business into local search results. Don’t worry if you’re not a coder, scheme generators can help create the right code for you.
Lastly, make sure there are no sloppy spelling or grammar mistakes in your site’s copy. Write in clear language rather than thinking about keywords for SEO.
Images
Images are how you turn a modest website into a visual feast.
Visual content increases clicks and engagement. Plus,images stick in the mind. If we hear a piece of information, we’ll only remember 10% of it; but if you add a picture, you’ll remember an incredible 65%, according to one study.
But, be careful not to overload your site with images. Lots of high-quality images might look great, but it can slow your site down. Web users are impatient and will vote with their mouses if your site doesn’t load quickly.
Test, publish and update
OK, so now you’ve mastered color schemes and the homepage, themes and fonts, what next? Step 7 is where learning how to design a website hots up. It’s time to think about publishing your website.
Woah, hold your horses!
Before you publish, you need to test that your designs actually work. Your site needs to function just as well on a mobile as it does on desktop. It needs to be as enjoyable to browse on Google as on Firefox.
This is another area where website builders come into their own. You can preview your store on different devices at the click of a button. Here’s a preview snippet of our test Shopify store on desktop and, inset, on mobile:
No comments:
Post a Comment