Services provided:

  • Website Design & Development
  • Hosting
  • Email

The Stromness Hotel is in the very heart of Stromness – overlooking the picturesque harbour of the historic seaport.

The Stromness Hotel approached us to discuss the redesign of their website. However, during the early stages of the project they encountered some issues with the company that provided their website hosting and email at the time, which resulted in them losing their email service completely and the website going offline. We quickly got a hosting account set up for them on our dedicated server and recreated their email boxes so they could continue to send and receive emails, thus avoiding a crisis!

With service resuming, we continued with the research and design stage of the project.

Design

As with all projects, we begin with pencil and paper. Sketching out rough ideas to generate page structure and flesh out components.

Some components, such as the header and navigation bar, require quite a bit of iteration as they contain some of the most important elements of the website. Being able to easily navigate from page to page in a clear manner is vital and we tend to spend plenty of time getting this part right.

A few examples of our initial ideas for the header section. When we got into the prototyping stage these sketches were dropped completely in favour of something new and different.

Once we had an idea for most of the sections and components a quick sketch of the homepage was drawn up to look at how it all would be structured and organised.

Initial homepage wireframe with notes on possible interactions or design highlights.

Prototyping (Design continued)

Once the initial sketching phase had been complete we moved into Adobe Xd to being prototyping those ideas.

An initial wireframe prototype of the homepage.

The individual sections are then taken further into the iteration process, adding colour and images to create a more realistic interpretation of the finished website.

Here is an example of our iteration process. As you can see, over the course of several small tweaks, changes were made to the initial prototype. This resulted in the final iteration which would then be used as a base component throughout the rest of the homepage.

One of the biggest changes that took place during this iterative prototyping phase were the changes made to the header/navigation section of the website. The initial mockups and wireframes designed for the header were dropped in favour of a fixed position “Frame” around the website. This frame would remain fixed in position and therefore always be accessible to the user, providing them with easy access to navigation links and contact information.

 

An example of the fixed position frame in action. You can also see some of the other elements of the website which dynamically appear as you scroll down through the website.

The Finished Product

<

start a new project with us?

contact us

get in touch.

Enter your name and email address to start a conversation with us.