 |
| Website Progress Page |
 |
| Mobile Website Progress Page |
Key Considerations:
- The website design needs to be considered in the terms of user experience needed to be natural to be able to get around and gain the information needed to clear and concise way.
- The homepages have an element of each of the sections that could be found within the navigation, which can be expanded upon.
- The website should have social integration to be able to show the way in which the business is growing and extending.
- The website should follow the clear branding identity and colour scheme of the rest of the brand and identity.
- The animation should be used sparingly and tastefully to be able to create natural transitions between pages.
- Considerations into the way in which the amount of information is presented should be carefully considered in order to not overbear an audience who doesn't know anything about the tree services industry.
Initial Development:
To be able to begin the development stages of the website I first began by wire framing each of the pages that need to be created, this included:
- Homepage.
- Contact page.
- Glossary page/info page.
- Our work/gallery page.
Through wire framing these out allowed me to be able to continue on with the design in the most concise and efficient way to already having a layout design that would naturally work for the user’s experience, taking into consideration the way in which competitors websites were also designed. Interns are taken into concept the research I had undergone at the positive points from the websites on which were succeeding, for example, the option to switch their images at the initial landing page, this instantly offers the consumer a chance to see what the business does. This also gives a level of professionalism and introduction to the visual identity of the brand themselves due to the fact that the imagery has been considered and the brand colours carried out, for example, the accent coming through in the autumnal colours of the images themselves. The accent colour is not you specifically on the landing page rather further down once the user begins to scroll to highlight certain elements, therefore representing the way in which it is used throughout the rest the branding identity. Below can be seen to examples of the wireframes created for each of the pages.
 |
| Homepage Wireframe |
 |
| Contact Page Wireframe |
A glossary was provided by the client in orders for me to be able to put on the website. This is a link that can be found through the services, allowing the audience to be able to get a better understanding of the meaning behind each of the services that can be offered from the company. Therefore, to be able to give a better representation of each of the services illustration was created. It is important that the illustrations were created with from hand by scratch, similar to the way in which the Photoshoot was unique to be able to give an exact representation of the business itself so did all of the other visual aspects involved within the branding.
The illustrations themselves visually represent each of the services are available in a simplified manner, in order to coincide with the simplistic manner of the logo and the illustrative style the same style was carried out within these illustrations as can be seen below.
 |
| Stump removal |
 |
| Pruning |
 |
| Reductions |
Website Design - Once each of the aspects were put together such as the photography and illustrative style, the website could be designed. Due to the way in which the client wished to have the website designed works, in order to be able to be editable without a designer further down the line, the design process itself was an interesting one which was limited through the way the platform works. This allowed me to create the website to the closest possible specification of my wireframes, this could be more exact through the use of a coder although being a start-up business this was too expensive of an option.
Home Page: https://www.crownworkstreeservices.co.uk
Contact Page:https://www.crownworkstreeservices.co.uk/contact
About Page: https://www.crownworkstreeservices.co.uk/about
Desktop Mockups:
Mobile Mockups:
No comments:
Post a Comment