Your complete A-Z guide to web design

If you’re about to take your first step into the wonderful world of web design, there’s a lot that you need to know. It might seem like a daunting task to take on by yourself, but don’t worry, that’s where we can help.

This month we’ve created this complete A-Z guide of web design, stuffed full of helpful information that should get you well on the way to creating visually stunning, fully responsive websites that your clients and readers will love.

Remember, you might think that some of these tips seem a bit beginner, but there’s nothing wrong with going back to basics sometimes is there? We all had to start somewhere 😉

Enjoy!

A – About us

When you’re initially planning your website you need to have an About Us page. This not only gives your readers a chance to get to know you a bit better, but it also helps to establish trust with an online audience.

Don’t be too free with sharing your personal information, but make sure that you include enough about your company that online readers begin to understand your company ethos and what you’re offering.

B – Brand consistency

One of the most important factors of web design is brand consistency. You need to ensure that all the branding across all your collateral is the same. This is so that customers who may have caught a glimpse of your brand in the past can instantly recognise you in the sea of competition.

C – Contact information

If you’re selling products, services or online courses, then you need to make sure that your contact information is displayed prominently on each page of your website.

For users who don’t have the time to trawl through pages and pages of information, giving them an easy way of contacting you is the best way to ensure that they stay as your customer and not your competitors.

D – Domain name

When you’re choosing your domain name, you need to make sure that it fully reflects you brand, but also make sure that it’s not too hard to remember. There’s nothing worse than trying to type out a long URL and then find that you’ve spelt it wrong.

E – Expectations

It’s not just about managing other people’s expectations; it’s about managing your own too. Your creativity may know no bounds, but there are restrictions with what you can do with technology.

Now we’re not saying that most aspects of design can’t be done with a few (or sometimes loads) of lines of coding or plug-ins, but don’t expect miracles.

When you’re starting out, you might think that you can tackle anything that a computer throws at you, but don’t be disheartened when something inevitably goes wrong. Learn from your mistakes and remember how you solved the problem should it happen again.

F – Favicons

When you’re in the first stages of your web design, you need to remember to install the favicon on your website.

If you’re not sure what a favicon is, it’s really quite simple. It’s the small icon that appears next to the website name on an Internet tab. This should always be a smaller version of your brand logo. For example, the One2create logo is O2C (surprising we know 😉 ). You can see the example below.

G – Graphic design

Graphic design and web design go hand in hand. When it comes to designing visuals for a website it’s important that you use the skills that are available to you.

For example, at One2create we have a team of web designers and graphic designers, all with their own skills and knowledge base. These teams work closely together helping to create online designs that work and look great.

H – HTML

This part might seem technical, so bear with us. HTML is short for Hypertext Markup Language and is used by web designers as a standardised method of coding various elements of a website e.g. tagging text files to designate font, colour, graphics and hyperlink effects on web pages.

As it’s quite technical it can seem like quite a hard task to undertake, but don’t worry, once you start to get your head around the specific coding, it becomes quite easy.

If you’re interested in learning HTML coding yourself, there’s plenty of websites available that give you basic lessons in writing HTML code. Take w3schools.com for example, there’s loads of easy to understand tutorials on their site.

I – Imagery

You wouldn’t have a travel magazine without stunning imagery showing the world would you? So why should your website be any different? When you include imagery on your website it’s important to find the best images you can.

Not only does this bring an interactive element to your website, but it also helps to showcase products and services that you might be offering. If you have the budget for a professional photo shoot, we would recommend taking that route.

However, if you’re just starting out as a business, then stock imagery can also give you some fantastic results. To find out more about royalty-free stock imagery, check out this blog post.

J – Javascript

Javascript is another computer language that web designers and web developers use to bring interactive elements to life on web pages. For example, it allows the web designer or developer to control any multimedia on the page, animate images and automatically change a formatted date on a web page.

K – Keyword research

Now this is more for Search Engine Optimisation (SEO) and content geeks, but when you’re taking part in a web design project, it’s important that you complete a full keyword research exercise before you even start to think about content.

This principle applies if you’re going to focus purely on organic SEO, or incorporate PPC advertisements into your strategy. Either way, using tools such as Moz Keyword Explorer or Google Adwords will definitely give your optimisation a boost.

L – Losing information

Imagine that you’ve just spent the last four hours stylising a website, you’ve got the padding just how you like it and the content flows throughout the page. For that split second everything is going according to plan, and then your computer crashes (Noooooooo!).

That’s a horrible feeling isn’t it, but unfortunately in the world of technology it can happen all too often. Make sure that you back up all of your work should you find yourself in this situation.

M – Meta descriptions

When you’re creating web pages, it’s important that you remember to fill in the Title and the Meta Descriptions for each page. For those of you who don’t know, these are what’s seen in search engine results pages.

In the example below, the One2create website Title is shown as a blue link and the Meta description is shown in black. Each Meta description should include at least one focus keyword per page, as this help when users are searching for specific terms.

N – Navigation

Another important element of web design is the concept of simplified navigation and overall information architecture. If your website contains hundreds of individual pages, this may present you with a challenge.

Where possible, try to keep your main navigation as simple as possible. If you do have a lot of information that needs to go on each page, then it might be time to decide how it’s going to be structured on the page.

At a bare minimum, you should include:

• Home page
• About page
• Services/products page
• Contact information

Remember, you can still utilise footer links, especially if you’re selling products and need to include delivery or returns information. The footer is primarily used for pages that include a lot of information, but aren’t necessarily pages readers would click on when they’re in the main navigation bar.

O – Objectivity

As a web designer, it can be hard to see your project through the eyes of another. However, when you’re creating a website for a client, it’s important to build the site based on their own requirements and customer/prospect demographic.

Yes, it’s nice to be able to put your own stamp on a website, but unfortunately you’re creating a website that’s going to be used as someone else’s business. This means that you need to really get into the mindset of the customer.

• Why are they going to be using the website?
• How are they going to use the website?
• What is it you’re being asked to product?
• What does your client want to achieve with the website?

If you can answer all these questions, then you’re already in the correct mindset. If you can’t, then take the time to find out.

P – Personality

That being said, it’s also important to inject some personality into your web design project. This could be as subtle as the colour scheme that you choose for the site, or it could be as “in your face” or using slightly risqué images to grab your readers attention.

At the same time as this it’s important to understand the demographics that are going to be using the website. If you’re creating a corporate site that focuses on FCA-regulated products, you probably won’t want to include images of puppies and kittens in hats, right?

Q – Quality over quantity

Another important part of any design project is your own quality control process. Becoming a successful designer means that you’re able to sit and review your own work, objectively.

If you’re not sure that it’s your best work, then trust your instincts. If you have a set list of minimum standards you must meet for each project, then you’re more likely to continue to develop your skills in the future. Not only that, you’ll be proud to include the site into your portfolio of work once it’s been launched.

R – Responsive web design

We can’t say this enough, but responsive web design is crucial to the success of any website. If your website doesn’t operate on a smart phone or tablet, then don’t, WE REPEAT, don’t, send that website out into the world.

51% of web users accessed websites on a mobile device in 2016, up 30% from 2015. What do you think this means for the figures at the end of 2017 and beyond?

To find out more information about responsive design, and how to fix your conversion rate, take a look at this blog written by Moz.

S – Search Engine Optimisation (SEO)

Not to open a can of worms, but SEO is a huge topic. From keyword rankings to Meta descriptions, image alt tags to robots files, there’s so much to learn and remember.

However, as a very brief overview, SEO is pretty much what it says on the tin. You’re Optimising your website for Search Engines. This includes utilising keywords, the correct use of headings (H1, H2, H3 etc) and including hyperlinks.

If you want to learn more about the wonderful world of SEO, take a look at this collection of blog posts we’ve written.

T – Testing, Testing, Testing

Would you buy a new car without taking it for a test drive? We hope not, and the same should be said for a new website. Would you hit that launch button without making sure it works responsively, that there aren’t any broken links and that you haven’t missed out any crucial information?

It’s vital that you test your website before you launch, even if it’s just a few friends or co-workers having a look. They’ll be able to highlight any areas that need improving, or spot any mistakes you might have overlooked.

U – UX UI Web Design

The user journey of any website is equally as important as the content that’s on each of the pages. UX UI web design focuses on ensuring that the user can easily navigate throughout your website with ease, whilst making sure that information has been placed in the most appropriate location.

You need to make the user journey as simple as possible. For example, make sure that the Contact Page is shown on the main navigation bar on all pages. At the same time make sure that the navigation bar doesn’t have too many pages as this can quickly lead to confusion and customers may leave your site.

For more information on why UX UI web design is so important, take a look at this blog post we’ve previously written.

V – Videos

We’ve already mentioned images, but videos are a great way to showcase your products and services too. Not only are they interactive, but they’re also a great medium to highlight how your customers are going to benefit from your business.

Videos could be as simple as an animation embedded into the website, or they could be as complex as a full interview-style piece in a proper studio.

As an added bonus videos are instantly shareable via social media platforms. If you’re going to include videos on your website then give your readers the chance to share them with their friends, families and colleagues too.

W – Website security

If your website deals with personal data of customers, then it’s crucial that you have security systems in place. This is particularly important if you’re creating an ecommerce website and need to handle monetary transactions on a daily basis.

The first way to maintain your website security is not to store personal data. This might seem counterproductive if you’re running a business, but websites that hold personal data are going to be the target for hackers and scammers. At the same time as this, not storing sensitive data means that you’re PCI compliant.

If you do have to hold customer data, then make sure that you’re using a secure connection for your online checkout. Better yet, employ an address and credit card verification process.

X – eXplain your process

This might seem like a simple task, but explaining your process to your clients goes a long way to establishing strong, working relationships with customers.

For those not in the industry, it might seem like all you do is click a few buttons and magically a new website appears on the screen. We can assure you, that’s not that simple (however much we wish it was!)

If you’re able to set your processes in place, and more importantly stick to them, then the project is going to go a lot more smoothly than it would if you just hit the ground running. Failing to plan is planning to fail and all that!

Y – You’re the expert

At the end of the day, even if you’ve only been designing websites for a few months, chances are you’re going to know a lot more than someone who’s never done it before.

You’re always going to find individuals that think they know better, even if they’ve never designed a website before. Take this as an opportunity to test the knowledge that you’ve learnt so far, but don’t be rude. That’s just not nice 😉

The same applies if you’re asked to create something that either can’t or won’t work on any interface. If this situation does arise, don’t just say no. Where possible, find out why this has been asked of you and suggest an alternative that has the same results.

Z – ZIP files

And last but no means last we come to ZIP files. This is the process of compressing all files to help increase bandwidth, increase page load speeds (which is great for SEO) and reducing data transfer costs.

So there we have it, our A-Z guide of all things web design. What do you think?

Is there anything you think we’ve missed out on that you use for your own projects? We’d love to hear your thoughts, so let us know in the comments below. Likewise if you wanted to give us a shout out on social media, you can find us on Twitter here or Facebook here.