Creating a presenting website for my FMP concept design.

To present my final outcome for my FMP, I created a website with Wix that allow me to present the large screenshots and tell the story behind some of the design decisions along the way. While I was making my concept UIs  I deliberately did not think about how I would present them so that I did not limit my creativity. On a project when I was working at Virgin Atlantic I was thinking so much about the limitations of presenting my work, that the work itself suffered; however, i am proud that I learned from my mistakes.  This resulted in me creating some screen mockups that were very tall pages, some of them were 8000 pixels tall.  I knew that placing these big images on a PDF wouldn't work as I would have to make them so small to fit in that you wouldn't be able to distinguish text or I'd have to crop elements up in which case you wouldn't see the full design.  I looked at other ways which this could be presented. 

adammarsh.org.jpg

I thought about making a video, however planning and editing a video in itself will be another task and I wanted to focus more on the design of the interface rather than the presentation of it.  I thought about creating an interactive website that let viewers scroll down and explore the full story behind the design concept.  I have done things similar to this before, and it works well as I am able to brand the site to match the style of the concept.

adammarsh.org.jpg

 I chose to make a website with wix.com due to the drag and drop interface and the fact they give you complete control over the web canvas.  I have used Wix many times before and am experienced with the interface which meant I would be able to mock up my concept however I wanted.  Wix has a feature called strips which let you place responsive segments of the website that can be completely customised. This meant I could make a responsive website and ensure it looks great on every browser, and am able to do this with no coding skills and little time. 

adammarsh.org.jpg

 Wix also leys you import your own fonts, which meant I could upload my branding fonts, Brown and Graphik, and create a completely bespoke look to this viewing experience.  I was able to add subtle animations such as fades and zooms which meant as the user scrolls down the page, things can come to life making the experience that much more fun. I also created some moving video content showing a MacBook with my moving content on, which gave a more realistic visualisation.

adammarsh.org.jpg

 I made the whole website on one long page, this meant once the user was on the page or they had to do with scroll down to explore the concept. I split the page into sections and added anchor points for each part with a navigation dialogue on the right-hand side.  I really considered the user experience by adding the navigation dots on the right meant that the user can quickly jump around making them feel like they're in control and not overwhelmed by the vast amount of content.

adammarsh.org.jpg

 Wix made this experience very easy as everything was drag and drop, and once you press 'publish' it goes live immediately meaning I can make lots of little changes and see how they looked real time. Due to the vast amount of images on the website it did take a long time to load the editor which often meant I was waiting around or had to refresh because there was so much to load.  However when the when the viewer visits the website, I ensured images were optimised so loading times were reduced.  In Photoshop I exported images as low-resolution JPEGs meaning although the quality would go down slightly, they were loaded a lot quicker making it easier for the viewer to view large chunks of content.

adammarsh.org.jpg

I really enjoyed creating a website to present as I had this infinite canvas to display my creations,  I could add text and decide how the viewer explored each design. It was like having a room in a gallery that I could dress however I wanted, except this was a page on the internet that I had complete control over.  I kept the design relatively clean and minimal to match the concept design and let the work to all the talking.

FMP, Practice, UALAdam Marsh