My name is Matthew Lynch and I am currently an intern at My Server Guy. Over the past few weeks, I was challenged to take on the current My Server Guy Health Checker and improve it by upgrading the look and feel of the website.
What is the Look and Feel of a Website & Why is it Important?
My challenge was updating the current look and feel of the website. By improving the sites look and feel this would portray a more professional and user-friendly look.
The websites ‘Look’ mainly consists of the:
- Colour Palette
The websites ‘Feel’ mainly consists of the responsiveness of dynamic elements:
- Website Speed
The look and feel are important to make sure that you convey your brand to your customers. Visitors may lose interest or get confused if they are not expecting the look and feel for that business or industry. The My Server Guy Health Checker was redesigned to be easy to use, approachable and friendly.
Making the Website Look More Professional & Upgrading the Look and Feel
Firstly to start, we looked at the other pages of the My Server Guy website to inspire us. This helped us to think up some ideas for the colour palette for the site. Following from this, we chose to go with a main blue accent colour that ran throughout the site, with a green that was also a consistent colour.
My Server Guy Health Checker Colour Palette
The previous website layout felt compacted in one area and was not spaced out. To further improve this we added white space around the elements and buttons. The footer’s elements were all on the left-hand side, giving the impression of unbalance. Therefore we changed it to make sure the footer looked and felt more balanced. We then made elements spaced across the footer rather than just in one place. This gave the layout a more user-friendly and visually appealing look.
Improving the images on the website was done for the purpose of again improving the brand of the website, look and feel. The main idea for the background was to make a 3D report effect. This was to illustrate to users what they would be presented with, when they got to the web report page. The other updated image was the logo which was provided, and was simply replaced with the old one along with the navigation bar.
The Typography used in the website was called ‘Montserrat Ultra-Light’ as a result this font helped to portray a clean simplify look. This typeface helps to convey a professional and legible look to the website. We intergraded SEO (Search Engine Optimisation) into the website to be sure that we looked professional if visitors shared their report on social media. We therefore included the use of meta tags and keywords. Lastly, users were always using mobiles to search and be productive on the go. We wanted to make sure that the web report was responsive from large screens, to tablets and mobiles phones.
Web Report Page
The web report page received the same treatment, keeping to the same consistent design. We again added white space around the elements to make it legible and easy to use. We added information to the report to inform users about how they can use the My Server Guy Health Checker to obtain insight into their websites overall health, performance and security over the last 72 hours. The individual website flaws were re-designed to make it easier to understand and with icons added this gives the report an overall visual appeal.
The Health checker website uses the CodeIgniter Web Framework, which is used to build dynamic websites with PHP. The site is structured around the Model View Controller development pattern. This approach separates application logic from the presentation and in practice is allows your web pages to contain minimal scripting since the presentation is separate from the PHP script.
Visit the My Server Guy Health Checker Tool and see what score your website will receive?