When John Davis began offering artificial grass services he decided to contact me about designing a new website to promote his new business and I was delighted to be of assistance!
About Grass Solutions
The business itself is relatively new but John Davis and his team are all experienced veterans in the flooring services they provide. The idea came after several enquiries for artificial grass from customers buying flooring services from the main business, Perfect Floors & Interiors. “Fitting carpets is in many ways very similar to fitting artificial grass turf” says John.
After a considerable amount of research and development of their installation skills Grass Solutions was ready to start trading! John got in touch the following week and we arranged a meeting to discuss the project requirements and possibilities. As they are also based in Frodsham I thankfully didn’t have far to travel.
The Design Brief
John had gathered together a good collection of brochures and leaflets produced by his potential competitors along with bookmarks to sites he liked which came in handy. We discussed the content, number of pages and services he was aiming to promote on his new site. He explained he was keen to try and stand out from the crowd somehow by not only having a great looking website but by going the extra mile when it came fitting the variety of turf that was available. After my crash course in the grass business I was ready to start coming up with ideas!
Sketching, Researching, Experimenting
One of the great things about doing what I do is that I get to work with all sorts of businesses, organisations and people offering all kinds of products and services. Armed with my new knowledge I began searching around to see how other similar businesses had tackled building their website’s. It quickly became apparent that most of the other sites looked like they had been built over time without much thought for design. I could see that various pictures, graphics, text and other bits and pieces had simply been stuck-on without any real thought.
After making notes on what I had found I kick-started the design phase by sketching out some rough layouts with pencil and paper. I find this is the best way to get a visual picture and loose grid guide of the home page and main elements of a new website. I often get ideas in my head while cooking the dinner or watching TV and have to draw them on a scrap piece of paper.
I was given quite a free rein with the design of the site which is always preferable. So I started thinking, people looking for a solution to an untidy garden are more than likely to be tidy people. With this in mind I decided to go for a clean, flat layout, lots of sharp corners and right angles. This is not only a design style that looks professional but an easy one to develop too.
There are so many good reasons for people to choose artificial grass, I had to convey this message quickly and clearly to visitors to the site. John also said he would like a simple slide show in a prominent position on the home page showcasing recent projects. With this in mind I tried drawing a few simple layouts to see how best to organise these blocks of information.
Full Design Visual
Being a fan of grids probably shows more than usual on this particular project. Apart from making it easy to keep things tidy on the page it helps with the UX (user experience) making the content easier to navigate. I drafted this design visual using my favourite design software Adobe Illustrator which enables me to create pixel perfect visuals.
Font selection and choosing the best colours was another important task. I wanted the type to be crisp and contemporary. I also wanted to be able to carry the same font through from the logotype to the small print at the bottom of the page. For the colours I settled on a selection of bright green, blue and grey with a bright orange accent colour to highlight buttons and hover effects.
The Website Header
Starting at the top of the page with the header area we have the logo which I included in the design process. Alongside side or below this, depending on what screen size you’re viewing the site, is the site tag-line. This is followed by a simple search box, telephone number box, which is click-able on mobile phones and a link to the contact page. The main menu navigation sits below all this at the base of the header area.
The Content Area
On the home page the content area begins with a simple image slideshow slider, I used the Meteor Slides plugin for WordPress for this followed by an image box with bullet points. I made this part of the page in two columns that stack up on smaller screens. The next level below I made with three columns and shows link blocks through to other key services offered by the business. Finally below the fold and organised into three columns I set the short introduction to the site over two of the three columns with some customer testimonials in the third column. This section also stacks up and reshapes to fit smaller screen sizes using CSS Media queries to alter the layout accordingly. Lastly in the home page content area I created a seven step guide to installing artificial grass using small image boxes.
The Footer Area
On this site I opted for a very basic footer which displays only a simple line for copyright and site credit. No widget areas were really needed as the site is only very small at this stage and I wanted to keep it as lightweight as possible for mobile devices.
Website Overview
When the design visual was finally signed off, following very minor client adjustments I might add, I began working on the development phase. I used WordPress which is a great CMS and so easy to install and use. There are loads of good third party plugins and vast support forum to help out when help is needed. After installing the software I began selecting a suitable base theme to fork with my design.
The Website Content
John had been finding it difficult to write good meaningful content for the pages on the site so I volunteered my writing services, don’t laugh! Yes I did indeed write the text for each and every page on the site and John supplied the images. I must admit it was quite a task but so far I’ve had no complaints, or insults.
Responsive, Mobile Friendly
Mobile web browsing is increasing at a rapid rate along with the use of tablets such as the iPad, Galaxy and Nexus tabs to name a few. We decided early on that the site would need to be easy to browse on many different screen sizes. This inevitably takes more time to develop and test but is certainly worth the effort. Responsive websites are becoming increasingly more popular as Analytics are proving and we felt this would give the site an edge over its competition.
Colours, Fonts and CSS Effects
- Colours used :
- Mixing colours to get the right mood can be a tricky business, I often use the the colour list at W3C as a starting point, its great if you can choose fonts straight from the this list as they’re supported by all major browsers. Below you can see the final list of colours I used including the hexadecimal values for each.
#D0E000 – Bitter Lemon
#336600 – Dark Green
#77D9CC – Tiffany Blue
#444444 – Dark Grey
#FF6633 – Amber
- Fonts used :
- I used Maven Pro throughout the entire website, you can get Maven Pro for free over at Google fonts and simply use the @import link in your CSS stylesheet, nice hey!
- CSS Effects used :
- Transition, which I used to get the smooth fade in the hover effects on the navigation buttons, links and form inputs. You can head over to this handy web app to have the CSS transitions code generated for you.
Conclusion
Well, I hope you’ve found the information above useful in some way and it helps you out with your next project. Please feel free to get in touch if you have any questions or would like me to design your new website. Looking forward to hearing from you no matter where in the world you are!
Thanks, Warren 🙂