22/03/17 – Interface Design
Above is the design created from the wire-frame developed in last weeks workshop. This was made in Photoshop, using guide layouts and rules to align the elements of the page properly and with continuity.
The transition from wire-frame to design was an enjoyable process, finally seeing a vision come to life. The design was slightly adjusted to fit in with modern website layouts and examples set by the reference sites. Taking the background image theme from match.com, layout styling and colour scheme influences from freedating.co.uk, and navigational ideas from eharmony.co.uk.
Information will be added in all the greyed-out boxes. The about us section and images will grasp the majority of the users attention, then whittling down to the secondary information in the smaller grey boxes. The advertisements on the right hand side of the window should be eye catching enough for a user to click on, but not so much as to grab the attention away from the main page. This will become less of an issue once a colour scheme is decided upon and implemented.
The block colour scheme helps to identify areas that need work, highlighting areas where images will be place, alongside primary and secondary text. It allows a brief overview of the structure of the webpage, and helps to give an idea as to the flow of the page, with attention being drawn towards images first and relevant text underneath second.