Wednesday, December 28, 2016

OUGD504 - Design for Screen - Wireframes

Creating wireframes is an essential part of the design process for building a website, acting as skeletal three-dimensional models on which you can add the detailed elements of the design.

Wireframes usually lack typographic style, colour, or graphics, since the main focus lies in functionality, behavior, and priority of content.

Wireframes are composed of lines, boxes and minimal notes and display the functional elements of a website or page, typically used for planning a site's structure and functionality.


Here are a range of wireframes featuring different concepts I had for the design of my website and it's functionality and user experience. 

Top sketch: Concept for landing page. The page is split in half with sides that expand and contract depending on the positioning of the users mouse. One side is for searching properties and the other is to log into your own personal account. 

Bottom sketch: Concept for 'my home'. Different windows take users to different features such as reminders, favourited houses and flatmates etc. 



Top sketch: Concept for search results page. Map thumbnail on the right had side of screen to show positioning of search results. 

Bottom sketch: Concept for individual house page. 


Top sketch: Concept for landing page. Taking inspiration from trainline, filters are the main option on the page allowing users to maximise their time when looking for houses, getting straight into the search. Users have the option to sign into their own space from this page if they so please.

Bottom sketch: Concept for 'Map View' on the search page with map on the right and images / house thumbnails on the left. 

Sketch: Another concept for landing page with option to view a potential feature called 'landlord of the month'. Showing the best landlords.




Sketch: Concept for individual houses page showcasing features of the house, map of location and reviews etc.



Sketch: Similar concept for landing page.


Sketch: Another concept for the 'my home' page in an alternate layout. 


Once I had done a range of sketches I narrowed them down into the ones I thought were the most user friendly, helpful and engaging.

Landing page:


Search Results Page (image view) :


Search Results Page (map view) :


Individual House Page :


Login Page:


'My Roof' Page:


Book a viewing window: 






No comments:

Post a Comment