Web Page Design

Web Page Design Template and web page Closeup shot of laptop with di

You must have already figured out from this beast of an article that Web Page Design is much more than it is made out to be.

Coming up with a winning design for your business or personal website is difficult to say the very least. There comes a time when you have used all the coding standards needed for success and worked out the different types of web pages, but the creative juices just stop flowing!

Well, since you cannot control the flow of creativity, don’t get frustrated. Instead of feeling stuck and wanting to give up, this piece aims to help you overcome this challenge!

We are here to help you with Web Page Design Tips to Avoid Frustration & Get a Winning Design for a website that works in 2019!

Ready?

Let’s get started…

These are the ideas you can use to overcome a designer’s block and get instantly improved results:

1. Browse Web Page Design Boards Online

Admin Concept For Business

Believe it or not, one of the best ways to brainstorm ideas today is online!

Whether it is your web page design, home interior design or just about anything – the ideas are abundant online. Most of us enjoy a particular social media network to be their go-to solution. Me personally, I prefer Facebook, but there are tons of others such as Instagram, Pinterest, etc.

Not only are you able to look at different concepts and give life to your ideas, it is also an excellent of way of visualising ideas or to get a sense of direction. A web page design like any other creative solution involves a lot of factors such as the specific type of images, variations in colours, attractive presentation, easy layouts and more.

2. Create a Plan

Young creative business people planning a design strategy

A cliché but true to every task is the saying:

Failing to plan is planning to fail!

Remember this saying as it related to just about anything you want to. For design, this is not an exception. If you do not prepare yourself with a well thought out plan, then you are just setting yourself up for failure.

Sometimes web page design ideas do not come around because you may have overlooked the fundamentals. When the basics are there, other things tend to fall into place eventually. Creativity is not achieved through a random idea, rather it is the redefinition of a basic idea.

A step by step guided plan will help you to achieve a web site design that works in 2019!

Start by setting a goal for your website. Be specific in what you want to achieve with your new website. Work out a relevant customer journey for your website. List the exact steps you want an ideal visitor to take while browsing through your website.

Finally, work out a web page design guide or a style guide for your website. You want to include the theme colours that you want, the heading styles, the body text style, colours, layout, elements, etc. There must be unity in the design of each web page establishing your brand identity.

This is an excellent stage to come up with your initial SEO plan. Understand what you require and how to better achieve it using your website. It is not enough to create a beautiful website, but it also needs to be optimised for Google to attract potential customers from the right type of visitors.

3. Focus on Creating a Customer Journey

Once you have a set plan in motion, you need to take a step back and focus on the structure of the website. This is when you step away from the processes and focus on being a visitor on your website. As the website owner, you must create a nice journey for your visitors. By the end of this journey, you want to convert them to a customer.

As a result, it is extremely important to remember that each visitor is a potential customer and must be treated with their due importance. Look at your website and make sure that the first thing to notice is what you want your customers to notice.

If you are too focused on making it look great, then visitors will only see a beautifully designed website. They will not be directed towards filling out a form, making a call, or buying your product or service.

What is most obvious on your website should also be the thing that will generate more customers for you as a business website owner.

4. Importance of Using Set Web Standards

It is very easy to get distracted while thinking creatively about your website. Most web designers either stress too much or too little on the creativity of the design. The right thing is of course to maintain a very good balance.

A crucial thing to keep in mind is to set reasonable boundaries when it comes to using creativity. You do not want to sacrifice maintaining set web standards for the sake of creativity. It is good to be creative, but not so much that you try to override standards that are proven to work successfully.

For example, web design has a set of standards such as a menu for the website, a left to right layout, messing with these kinds of things will only confuse your potential customers. When too many rules are broken, it is no longer creativity and you are simply left with confusion & chaos.

The following are some established standards which are better left intact:

  • The consistency in our business branding & design across each web page design
  • Website logo placed in the upper left corner and the footer
  • Contact information displayed in the upper right
  • The main menu clearly visible across the top
  • The main headline, heading or CTA clearly visible and towards the top of the web page
  • Search feature available in the header
  • Social media icons displayed on the footer

As an internet user of today, you may not have noticed these things but if you look back at the last website you visited, you will find that these things are adhered to.

5. Minimalistic Web Page Design and Proper Use of CTA Buttons

call to action buttons

At all times be aware of the objective of your website. This will help you to easily get rid of design elements or even simple things like images, text, etc. which actually do not serve a purpose. Doing this will make your web page design clean, neat and overall, more pleasant to look at.

The most effective and beautiful design is simple!

Not only is it perfect to get your point across clearly, it will speed of your web page loading speed by getting rid of unnecessary baggage. The clear use of CTA or Call To Action button is also a must. Visitors must be able to easily spot things like your phone number to make a call, your email to send an email or the buy button to make purchase, etc.

Here are some ways to be minimal in web page design:

  • Menu items — do not over complicate your menu by adding too many items, subitems, etc. Try to stick to the most essential items.
  • Sidebars — constantly look back at the many elements being used in your website such as the sidebar. If it is not needed, then simply get rid of it.
  • Muddy jargon — whether it is in the form of text or images, get rid of jargon surrounding your webs page and focus on getting your point across simply and clearly. If needed, use the help of professional copywriters.

6. Mobile Responsiveness

A woman's hands making up a website design on a whiteboard optimised for mobile phones

It is not any longer a secret or a complicated solution. Every web page design must be mobile responsive for all the varying device sizes that are commonly used to day. Websites are not visited only through computers and laptops, there are tabs, phones, and other next generation devices widely being used.

Search engines like Google are constantly prioritising mobile friendliness through their algorithms and other changes. Google is constantly searching through website and finding out who is more mobile friendly and ranking mobile responsive website higher than others.

When designing a website, pay attention to each design element and ensure that they are visible and fully functional across mobile devices. Your visitors on the many different platforms should be able to use the website easily.

Since the visitors of the modern-day are primarily mobile users, the preference for a responsive website continues to be higher. This is also proven by Google’s algorithmic changes which continue to shed more focus on mobile platforms and the mobile page speed insights.

7. Proper Formatting of Content

It is often a very neglected aspect of web development. A lot of time content itself is not prioritised and this is one of the most devastating that you could do to your website, even if it is a fully responsive website.

Content is the number one most important ranking factor by Google. Also, the content of your business website whether it is in the web pages or the blogs, etc. it is your sales person to your visitors and potential customers.

Your web page design should be able to display your content in a way which is appealing to your potential client. A major aspect of this is the formatting of the content itself. Not every word on your web page is read by your visitors. Also, search engines prioritise certain aspects of your content.

The following are some guidelines of formatting content:

  • Headings — the use of headings and subheadings is not just an excellent way of making things easier for your readers but also about boosting your ranking
  • Bulleted lists — the age-old technique of breaking down long pieces of content into easier to read smaller sentences, paragraphs and lists is still true in terms of website content
  • Use of media and visuals — Visual information is proven to be much more effective compared to text, so vary content using images, videos, etc.
  • Font style & size — use easy to read font style and size to make sure it is clearly visible and can be understood by your readers

Just go through this article and you will see the practical use of these guidelines and let us know if it has worked.

Final Thoughts on Web Page Design Tips

Not too long ago, there was a set formula of how to do something. But things have changed over the last decade and we continue to innovate everything we do.

Back in the day, website design was focused on the use of colours, fonts and a lot of extras. We have come a long way and now it is about minimalistic design. The creativity is not expressed through extravagance but simplicity.

You may look at different website design ideas and find it difficult to make a decision. All the back and forth with tweaks here and there and being unsure of a design is only natural.

The only way to know if something works or not is to try it!

So, work with different variations of web page design to find one which is most successful based on your visitor experience. Every little tweak from the font style, size, colour, calls to action, images, etc. can make a big difference.

Modern website design is not just about looks but also, many other non-design elements which directly impact user experience. It is always a great idea to use a web design agency which has the experience of using bespoke website design elements, online marketing tools, etc. for best solutions.

You should launch a professionally designed website with a visually appealing interface and engaging components for attracting your target customers. It is best to use the experience of a reputed web design agency which works on such engaging solutions to improve the online marketing potential for your website setup.

Let us know your thoughts about the web page design tips shared here. Mention a tip that has helped you in the past that we may have missed.

Types of Web Pages for your Business

web page design layout

Web page designs come in all shapes and sizes, yet there are some popular ones used by most businesses across the UK.

In this section we’re going to delve into the different types of pages you can have on your bespoke website so you can decide which align with your business principles and which don’t!

Home Page

We’ll start off with the most important web page design, your home page. This is the first page a visitor sees on your website and is the single most visited page.

Visitors to this page have certain standards and expectations. They want to see an overall view of what your business is about and the services it provides.

This page is the first experience a customer has with your business so you want to make sure you have the logo of your company next to your menu bar. This makes logo design an important tool in your business’s arsenal as the more professional it looks, the better chance you have of convincing visitors you’re a decent company.

At The Web Designer Group we produce professionally designed logos for all of our clients at no extra cost, because we know how important it is to look professional online.

The header image is the next design element your visitors will see. This image needs to be both relevant to your industry and eye-catching. High resolution images are the key to both intriguing visitors and providing an overview of your business and its services.

Here is a good example from a website we built recently:

the header image from the website aktiv pest control

The title and image itself match the colours of the logo as it backs up the professional feel of the website.

This image is actually part of a slider with three separate images that automatically cycle from one to the other. The header image then becomes animated, and this will have a better chance of keeping the visitor’s attention.

Modern website design has started to ditch traditional headings altogether and have opted for an animated image instead. These images are more visually engaging than standard static headings and sliders.

Once you’ve got the header down, it’s a good idea to explain why your business is better than the other businesses in your industry. Content explaining any certifications you have or work you’ve completed for well-known companies would work well here. Any reasons you can come up with for customers to work with you over your competitors are essential to attracting business through your web page design.

Next, you want to give a quick breakdown of your services so the customer can see if you provide what they’re looking for. Putting a call to action such as “call us now on 0800 888 8888” will ensure the potential customer can contact you if they like what they’ve seen so far.

From this point on it’s up to you what you put on the rest of the page. Maybe a quick contact form where you can collect the details of interested visitors such as name, email address, and phone number.

[/vc_column]

GET YOUR FREE WEB PAGE DESIGN QUOTE TODAY


Website DesignSEO - Search Engine OptimisationPPC - Pay Per ClickSocial MediaBusiness AccountingBusiness BankingPromotional Material

A fan favourite to put at the bottom of the page is a testimonial system where you can provide ethos from customers you’ve worked with previously. Try your best to include clients who are leaders in the industry you work in such as managing directors and CEOs.

These are the basic design elements you want to include on your home page design!

About us

Another page every industry can benefit from is the ‘about us’ page.

This is the optimal page to provide intricate details of your company and show the client that although you own a professional business, you are a regular person just like them.

You can include a few blocks of text, one explaining how the business got started, another on who the owner of the business is, and the future plans for the business going forward.

A nice hi-res image of the owner wouldn’t go amiss, but if you’re not comfortable with that maybe include an image of your office or your work vans just to add that personal touch.

Call-to-action buttons such as ‘Ready to work with us’ with links to your phone number or Contact Us’ page at the bottom of this section will help with conversions.

This is an example of a simple About Us page from a website we built for one of our clients:

About us example from aktiv pest control

Clean design, easy to understand with a nice hi-res picture to brighten it all up.

Contact Us

This is one of the simplest web page designs whilst being one of the most important.

You can install a number of different plugins to create your own custom contact form for this page. WPForms and Contact Form 7 are two of the best, and I would recommend using one of those.

With this plugin you can create custom fields to collect specific information from your customers. This is a great way to get the information you need before you follow up with the client. You can also quote them more specifically and you’ll have something to discuss when you respond to them.

For reference, here is the form we use on The Web Designer Group contact page:


Website DesignSEO - Search Engine OptimisationPPC - Pay Per ClickSocial MediaBusiness AccountingBusiness BankingPromotional Material

We have a drop-down field so we can get a feel of how much a client is willing to spend, we have tick boxes to narrow down which service the visitor requires, and we have a message box so they have the opportunity to explain what they’re looking for in more detail.

The information from this form will be sent to whatever email address you choose so you can keep a separate address for these requests to keep it separate from your other business emails.

It’s also a good idea to put your contact number, email address and business address on this page so your visitors can contact you directly if they don’t want to fill out the form.

There are those customers who will want to drop into your business in person, so integrating a Google maps location is the third section to add to this web page design.

All you have to do is add a text box, make sure you select the ‘text’ tab and paste in a link to your location from Google maps.

Here’s a quick step-by-step guide on how to do that:

1. Type the address of your business into Google Maps

google maps embed

2. You should then see the address of your business

second google maps embed

3. If you click the share button you’ll get a small window in the middle of the screen

third google maps embed

4. If you click the ‘Embed a Map’ tab you will see a preview of the map that will be embedded on your site.

fourth google maps embed

5. From here you can select the size of the map you want to embed then copy the HTML code

6. You now want to log into the back end of your CMS system, in this example we’ll use WordPress

7. Once you’re logged into your WordPress, locate the page you want to add the map to

8. Add a text box to the page, click the ‘text’ tab and paste the HTML code in there

first WordPress tutorial
second WordPress
third WordPress tutorial

9. If you click the ‘Visual’ tab again you should be able to see your map!

fourth WordPress tutorial image

10. Once you click “save changes” the map will be officially integrated into your web page design.

Services page

This web page design will differ depending on the type of business you’re running.

You want to go into more detail on the services you provide than on your home page, but not so much that it becomes convoluted and difficult to understand.

For each section on this page it’s good to have an image of you carrying out the service you provide for extra ethos.

Blog page

This web page design will differ depending on the type of business you’re running.

You want to go into more detail on the services you provide than on your home page, but not so much that it becomes convoluted and difficult to understand.

For each section on this page it’s good to have an image of you carrying out the service you provide for extra ethos.

This page is essential to anyone trying to rank high in Google searches.

You might have seen the phrase “content is king” thrown around on the internet, but this isn’t just any phrase, it’s one Google came up with to encourage people to update their websites with fresh content.

Blog posts are essentially the perfect way to include all the keywords you want to rank for in Google and are the basis for all SEO work.

You can learn more about SEO on our website:

This page should be kept simple, with a list of your latest blogs for people to read at their leisure. This another great way to prove to your customers that you have a lot of knowledge about your industry.

The code that goes into web page design

image of a laptop with web design coding coming out of the screen

There are lots of different types of coding principles used by web design companies to create some of the best quality websites out there on the web. These varied code styles work hand in hand with each other and can create some incredible designs.

Just take a look at The Web Designer Group portfolio to give you some inspiration for websites if you have a chance! We’re sure you’ll be impressed!

So, let’s get into the gritty process of coding!

HTML (HyperText Markup Language)

HTML coding on screen overlaying two people on a laptop

This type of coding is your base for bespoke website design. The first thing you are probably going to do is make sure you have all of your design elements ready for the base of the website and start writing out your HTML code. These elements, to show a few, would be like this:

html code example showing the basics of HTML

As you might be able to tell this is what the code looks like before it enters what we call the ‘front end’ of the website.

HTML is quite basic, easy to grasp, and doesn’t take long to learn unless you want to build your own website from scratch and not use templates, in which case it might take some time.

This is the easy level of coding; it gets much more difficult when you enter the depths of CSS.

CSS (Cascading Style Sheets)

CSS is the styling type of coding which is stored separately in a CSS screen. Most developers prefer to separate their work with CSS, like the body content being separated from the header content. This makes it easier to quickly go in and change anything they need to change, so they can see any errors or broken code on their screen.

What CSS does is give the developer the ability to keep organised, without having to go back and rewrite all the HTML code they’ve already put in place.

Unfortunately, this involves going back and forth between CSS and HTML sheets which can be quite tedious, however, it is definitely worthwhile at the end of the day as you will have your fully functioning responsive website.

JavaScript

For businesses this is probably the most important style of code. JavaScript is code that you find in most contact forms, auto-fields and image carousels that you might find on a bespoke website.

Some components of JavaScript give you the ability to change the content on your website to make it look flashier or at least a bit different than most. One thing you have to be aware of is: you don’t want to go overboard with your JavaScript otherwise your code is going to look absolutely atrocious in the ‘back end’.

Also, don’t make your content extremely hard to read with adding a little too much JavaScript otherwise the point of your website may become disillusioned by your viewers.

Putting it all together

Now that you know a little bit about the basics of coding you might want to try it yourself!

One thing we mentioned earlier was that coding can be quite tedious due to going back and forth with the various different styles of coding. So, make sure that you have a few hours of concentration up your sleeve, as making a mistake can be quite frustrating with web page design.

If, however, you don’t have the time, then The Web Designer Group is always on hand to fix any issues with your website as long as you’ve purchased one from us in the past. We will also build you a new website if you are thinking of getting a new one and if you are starting a new business.

Click below to find out more about our web design packages:

A word of advice

Not all web designers need to know about coding but just in case you do, you can always look over this section of our article! One thing you might wish to know is that coding does overlap with web design and web development from time to time, so it would be handy to know some!

Learning code will definitely help you broaden your knowledge though, especially if you are working with computers on a daily basis. Imagine the amount of satisfaction you’ll receive from doing something you previously thought was out of your league.

However, knowing a bit of code doesn’t make you a coding guru.

We don’t want you breaking your website and turning it into an unusable mess. Make sure you know what you’re doing before you touch your website, or even, in the worse-case scenario, a clients’ website.

If you are in need of some experienced coding by a professional web design company, The Web Designer Group can provide that helping hand. We code websites in seven working days so you can see that we are dedicated when it comes to coding a website. We are experienced site builders with the ability to produce a modern website design.

Don’t believe us?

Check out The Web Designer Group portfolio for more information on the websites that we’ve designed as we’re sure you’ll find something you’ll like.

Conclusion

In this piece we’ve covered different web page designs, the web pages themselves, and delved briefly into how they’re coded.

I hope this blog has given you some tips and tricks for creating the ultimate web page design for your business, or started you on your journey to creating web designs yourself.

We will be writing more in-depth, niche pieces on this topic in future so make sure you bookmark our blog page and keep your eyes peeled for more tips and tricks in the future.

Thanks for reading, we hope to see you in the next post!