Research – Font and Colour

Before deciding on a colour scheme we decided it was best to research into existing estate agent and room finding website. This would provide us an insight into the genre of the web application we will be making and the type of colours and fonts they use throughout their website.

Fonts

As the target audience for many estate websites is mature adults and as the site is a serious topic the fonts on the page are very simple to read. The fonts on all sites I have visited use ‘sans’ fonts.

6a01053618f097970b017c37209230970b

Colours

Blue is the most widely used colour among the websites not only in backgrounds but in font colouring, navigation bars, images and icons.

Commonly used colours:

  • Blue
  • Orange
  • Green
  • Purple

easyroommate Screen Shot 2015-02-26 at 14.37.29 Screen Shot 2015-02-26 at 15.11.54

Site Designs

12

Within the group it was decided that I would create the basic plans for the design of the website. As seen in previous posts I have researched into many existing house finder websites to understand basic layout.

Additionally I have prioritised the content on the page as to what I feel would be most used by users.

123

Including a navigation bar that is located at the top of the page was key. This would allow for easy navigation around the site for all users. As this is a recognised position for this feature among web design it means users already an idea of what the bar will do without having visiting the site before.

Many of the websites I visited within the research used a horizontal design layout. This is where most of the content was posted in different boxes one under the other, in a horizontal way down the page.

1234

Spacing the boxes down the page offers a clear distinction for users when using the site that each section is different. Additionally this will make the site look professional, yet be functional for the users.

12345

Including a ‘How It Works’ page will ensure users are able to use the site to its full potential additionally if they are unsure of the to use the site this is a great go to page to understand. A page like this was found of some of the existing sites I researched.

I have designed the footer to be fixed at the bottom of the window at all time on each page.

123456

The Final Idea

We have decided to design a House Finder website, where users can find housemates and a house to live in where rooms are vacant. We have decided to aim our website at university students in the South of England as we feel like it is not too broad but not too small of an area.

Many of the current websites similar to our idea only include main towns for rooms, where some universities in the South are not in main or busy towns therefore focusing our site on this means they will all be catered for. We will create a database where users will have a username and password, without signing up to the site users will be able to preview content posted to the site however they will not be able to submit to the site without logging in.

Once an account has been created they can then search and filter by universities in the South to find a room that is available, whilst reading information on the housemates and the house.

There will be a tab in the navigation bar that allows users to submit room details, here they will be asked about many different aspects of the room before it is entered into the database.

The search page is where users can then refine a search to rooms and people that are relevant to them. An example of this could be searching for a room where current residents go to Oxford University. Contact will be allowed between email addresses or phone numbers.

I have been designing the layout for the website, initially sketching then moving onto coding using CSS and HTML in Brackets whilst creating the forms along with Terry in PHP code, along with designing the database tables we will need to include.

Chloe have been looking at colours and logos to use for our website, we have all been uploading information about the project to the group wiki.

We will all continue to work as a team, allowing each members input into our work.

Layout Research

When designing the layout of the site it was essential that research into websites similar to the one my group and I would be creating. This would provide us with an understanding of the generic features used across all sites and the effective aspects that many include that we could interpret on our site.

layout1

One feature I have noticed is all sites work in a horizontal way. Many of the content is split horizontally, the navigation bars, footers and page content are all arranged across the page. This is effective as it allows users to establish the different sections of the site. Additionally it offers good use of space whilst remaining interesting for users.

layout2

Another feature I found many of the sites use is a main search/button main feature on the home page of each site. The search/button feature allows users to move into the site in a personal way with them selecting which page they want to be moved to. This feature is something when designing the site I will include.

layout3

This feature is found on uk.easyroommate.com, I will defiantly include something like this on the homepage of the web application as it makes the site appear easy to use, meaning users will be happy to continue their experience beyond the home page of the site.

form3

Forms

 To create a successful form it is essential that the submit or search button stands out. With this button standing out users can recognise what the form does with ease due to its text label. Additionally users can easily submit the data and gain quick results rather than having to search around a page for the buttons.

form1

All of the forms I saw on house finder websites incorporated the main colours used on the site. This made sure the form looked connected to the site and meant users would understand it is part of the site and can be trusted. Additionally they were positioned central to the page to ensure they are recognisable to users, this is a feature I am interested in incorporating into the website my group and I will create.

form2

The forms include different methods of submitting data into a form. Varying from entering fields to drop down menus to section boxes. These different options allow a simpler and easier experience for users, when entering data they can understand what is being asked quicker with the answers offering support additionally the answers mean correct and relevant information can be submitted so when the room appears on the results page all data is correct therefore allowing interested parties to enquire with ease.

form4


Display

Displaying the results is a main aspect of the site we will be creating. Connecting to the centralised database to allow the sites purpose to be met, to display vacant rooms by the different universities in the south. Research into existing sites that display houses was needed as it would allow for an understanding about the general layout.

rightmove display

Research into many different sites took place. Key aspects of the display are that they feature:

  • An image
  • A description of the property
  • Postcode
  • Price
  • Date added
  • Contact information

Therefore when display results on our site I will incorporate the relevant information for users to be informed about the properties.

zoopla display

Refining Our Idea

The aim of meeting the team the today was to refine out idea, so that we would have a clear understanding of what web application we were going to make.

Initially my group and I decided upon the housemate finder idea where the layout would be similar to a dating website where each user would have a profile and they would search for others using refined searches on the site finding those who they would be happy to share a house with. This idea has now been improved and changed.

We have chosen to introduce a room finder tool into the site. We thought this would be more useful and is in demand more so than to simply find housemate as many people would want to be searching for rooms that are available but may be reserved as they are worried about potential housemates; which is where we decided users who upload information about rooms available will now need to upload profiles about themselves and other housemates in the house. This makes the site different from many of the sites in this genre as they focus not only on the rooms but also the housemates.

Additionally upon signing up to the site user will need to enter the university they study at to ensure all members are students as this is who we are aiming the site at.

This would make it easier for students searching for room to be with housemates that are similar to them. Additionally we wish to introduce the idea of selecting via different universities so that the site is locked and will be used and aimed at strictly university students.

Group Wiki

Another task assigned to be was to download and install our group wiki onto the dakar server, this can be found here:

dakar.bournemouth.ac.uk/~tbridges/wiki/dokuwiki/doku.php

When posting to the wiki we have decided upon some small design steps to follow, these are:

  • Bold post heading
  • Text aligned left
  • Break paragraphs so they are short and easy to read
  • Use bullet points and numbered lists when possible
  • Images on the page should be 200px wide and centred
  • Underline important words or phrases
  • Date posts before heading

wiki