Design for web

Page 1

Design for Web

Content

OUGD504 Design Boards

Home

Igloos

Book Now

I used a full screen image to show the resort and stand out to engage the viewer because of its wow factor. I added the Northern Lights forecast as it’s what people are most interested to see in Lapland.

I needed to show both the igloos that are available in the resort and I used the content on the website so that it stays true to the Igloo Village and the user can see all the information they need.

To make it a realistic hotel website I added this to show what it would look like if you searched for a holiday. I tried to make it easy to use by being able to swap dates with the arrows and see the cost.

Things To Do

Resort

Contact

Following my survey, I picked the six most voted things that people wanted to do if they went to Lapland and included these for my content, as it’s what users want to see.

On the original website there are four areas for the Igloo Village resort. I included all of these on my website to stay true to the resort and use the existing information.

I used the exisiting details on the current website about where to find the hotel to keep it realistic. I also added a working form for people to enquire about the hotel.


Design for Print and Web

Home

Igloo Village Website These are the final designs for my website. I was able to recreate it in coding almost exactly, with the only real difference being the opacity of the boxes and not having an image slider in the code.

Final Designs

Igloos

OUGD504 Design Boards

Book Now


Design for Web

Research

OUGD504 Design Boards Original Website

The current website is very dated and isn’t inviting at all to the user. The use of the cartoony map and logo makes it seem unprofessional and like a budget hotel. By including multiple photographs on the page in diferent sizes and formats it is very inconsistent. There is a lot of sub navigation links as well which makes it confusing for the viewer to keep track of where they are on the site. Original Website Parallax Scrolling The overall tone of it doesn’t portray a luxury, high end hotel experience which is what it is. The main I used a full screen image to show the resort and I needed to show both the igloos that are available feature for the resort is the Glass Igloo, which is stand out to engage the viewer because of its wow in the resort and I used the content on the website only shown as a small image here. factor. I added the Northern Lights forecast as it’s so that it stays true to the Igloo Village and the what people are most interested to see in Lapland. user can see all the information they need.

Luxury Hotel Websites I started researching luxury hotel websites to see how they are laid out and what they include. A common theme was big images to show the user what the hotel and area is like t entice them.

I also noticed small or side navigation bards to not distract the user from the images and only including what is needed.

They mainly use simple and limited colour schemes so that the photographs stand out against them.


Design for Print and Web

Concept

OUGD504 Design Boards

Logo

Brief

Luxury

I updated the logo so that it fit with the more contemporary look and feel of the site. It still resembles the old logo, but is specific to Igloo Village.

To advertise and inform Igloo Village and provide facilities to book, should they want to stay. It should be contemporary as well as reflect the traditional Finnish culture.

I wanted it to be a luxury website with contemporary features such as full size images, a booking feature and advanced features such as the Northern Lights Forecast and Local Time.

Roboto Roboto Roboto Colour Scheme

Font Choice

Audience

I decided to use monochrome as paired with the photographs it wouldn’t be distracting and would always fit in. It is also the most readable combination and has a professional feel to it.

I decided to use Roboto in three weights for the font. It is designed for web use and is a readable sans serif. It’s clean and professional and works in both small and large point sizes.

The audience is maturer couples and families who want to experience the exclusive hotel and resort. It is a once in a lifetime trip with many excursions so needs to reflect the unbelievable activities.


Design for Web

Technical Decisions

OUGD504 Design Boards

Page Jump

Rollover Buttons

Form

I used page jumps throughout my site to showcase big images so that the user can get excited about what they will endeavour and add a lot of content without the page becoming too cluttered.

I used these to portray drop down menus as it was a lot easier to style them exactly how I wanted. It shows the user exactly how the site will work and makes it more interactive.

I created a working form so that the user can send a message and enquire about anything. This allows International people to contact them for free, as well as write a detailed question.

Button

Links

Responsive Background

I created working buttons on my site which would allow the user to send things as well as link to other pages.

The navigation links to other pages correctly, and the text is underlined when active. The logo also links back to the home page.

I made the full background image responsive so thta is adapts to all screen sizes. This is important due to the variety of screen resolutions that are available now.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.