Wireframe prototyping

Figma design file – https://www.figma.com/design/cADQfJCa8tJSCzVy4XEeDM/EF-LF-Web-Home?t=b7j9YRbgFkr0vTVB-1 All links to images shown in file. Low Quality For the overall layout, it has mainly been a 2 column grid layout to balance the amount of words to imagery. Having a balance of content is necessary to keep the viewer not only interested in the page, but also not overwhelmed by large quantities of textual information. Using a low fidelity design, a suitable layout has been designed to achieve this balance. A reasonable amount of white space between sections allows parts of the page to be easily distinguishable from each other so that the viewer can navigate all information with as much ease as possible.  Mid Quality To give the site a bit more of a visually appealing look for the viewer, the background has been changed from white to a light shade of blue. Not only does this strain the viewer’s eyes less, but it can also connote the sense of trust throughout the brand but also relate to the sky. Blue skies are often shown in imagery of green energy sources, so having a similar shade in the background will encourage the viewer to relate the brand to the green energy they are providing. A light shade of green has also been used in headers, buttons and section breaks to contrast the light blue but also stick within the brand’s colour scheme. Both these colours create the same connotations as the logo except in a more subtle way to keep the viewer more focused on the information given.  A similar font style has been used for titles and text that is supposed to stand out such as facts and captions. Figma’s font “Anton” has similar characteristics to Poppins Bold which helps to create a consistent theme throughout all designs for the branding. Using this font makes theses sections of text have a strong contrast compared to the normal smaller and thinner fonts used in standard bodies of text. Viewers will be attracted to these sections, which will guide them down the page into the next section until another bold title shows. Keeping these sections relatively short helps to keep them more impactful, as large quantities of it would begin to overwhelm the viewer and lose its effect.  High Quality When a viewer first enters the page, they would be greeted with a bright, visually appealing image to do with green energy. This will be instantly recognisable to the viewer, partnered with the logo header, what this site is about. To help, an attention-grabbing caption has been added which is the first main part of text the viewer will see. Because of this, the content of the text needs to be simple, straightforward, and affective so that the viewer knows exactly what the organisation’s views are.  The top menu has a simple, spaced out layout with multiple options to choose from. Hovering over one of these options with your mouse will then change the text colour to blue to help the user know what is a clickable option. There is space to add a couple more pages to the menu if necessary, however if this were to happen it may become easier to move this menu bar into a drop down menu so that the page count can be easily adaptable and still accessible.  The branding slogan “Get greener with Eco Future” is the first part of the main section of the homepage seen along with a large version of the logo. For anyone that has come from a social media post or seen an advertisement, they will be able to easily relate them to this page.   Showing statistics can be an effective way to show what a brand has achieved, so an impactful stat right below the logo will catch the viewer’s attention and be something they remember and relate to the brand. Brands like Tesco and Asda often use the “Price Match” technique to encourage people to do business with them, so a similar technique has been used throughout the site to compare Eco Future with the fake brand “Green Gas”. This helps to advertise all the positives of the brand whilst also encouraging viewers to choose you over someone else.   Reviews from other customers help you know that what the brand is promising is actually a real thing. Getting to know how other people’s first-hand experiences were allows the viewer to get the confirmation that they need to know that they will most likely have the same experience as everyone else. A review section has been included with an automated rotation throughout what would be random user reviews. This helps the viewer gain trust for the branding too knowing that other real people have gained the benefits promised by the brand.  A few options to go to more pages have been added towards the lower end of the home page. Because the viewer will have now found more information on the brand and why to invest in it, this section with more pages encourages them to look further into it or go straight into joining if they want. Reminding the user that there are more places on the website to go guides them into visiting these pages or at least creates a higher possibility of this happening compared to if there was only the menu bar at the top. Hovering over these buttons also changes their backgrounds to blue so that they know these are clickable sections.  All images where possible have rounded boarders to connote the sense that everything in the brand runs smoothly and so will your experience with them. It’s only a small detail, but in general it makes the page feel cleaner and better organised than the jaggy edges of normal images.