- Website Design & Development
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.
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.
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.
Prototyping (Design continued)
Once the initial sketching phase had been complete we moved into Adobe Xd to being prototyping those ideas.
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.
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