Workshop 7: Interface Design

22/03/17 – Interface Design

Website Dev_NoCol

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.

Design references:


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, layout styling and colour scheme influences from, and navigational ideas from

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s