Final Website Comparison

By -

I decided to write a comparative post, comparing my mockups and wireframes for my website.

My first initial observation is that the wireframes are a different screen width to the mockups, therefore the elements added aren't going to be entirely accurate in scale. The main changes from the wireframe are on the homepage as well as the header section header copy aligning to the left instead of right as it is easier to read left to right.

Navigation Bar

  • Full logo with tagline is included instead of just the symbol.
  • Navigation links are aligned in the centre instead of to the right.

Homepage

  • Body asset spans over one section instead of overlapping over two.
  • Copy from sections 1 & 2 are aligned to the left on the final website instead of the right.
  • Getting diagnosed section is aligned to the right, with larger complimentary asset.
  • Buttons have rounder edges.
  • Low FODMAP diet buttons are in a row (however these become two rows once the screen width is reduced.)
  • Support section is similar but the image assets were removed.
  • Two new sections added before the footer on the final website including, 'Wondering if you have IBS' and the Social Media Instagram widget linking you to Grumble Tum's account.



Have I got IBS?
  • This comparison has more similarities than differences.
  • Header copy is aligned to the left instead of the right.
  • Speech bubble asset added to the header section.



Getting Diagnosed
  • This comparison has more similarities than differences.
  • Header copy is aligned to the left instead of the right.
  • Speech bubble asset added to the header section.
  • More descriptive copy added underneath Bristol Stool Form Chart assets.



Low FODMAP Diet
  • This comparison has more similarities than differences.
  • Header copy is aligned to the left instead of the right.
  • Speech bubble asset added to the header section.
  • More descriptive copy added underneath each diet stage and food groups with limitations section.
  • Social media widget included a button.
  • Writing a food diary used one image asset instead of two.



Getting Diagnosed
  • This comparison has more similarities than differences.
  • Header copy is aligned to the left instead of the right.
  • Speech bubble asset added to the header section.
  • IBS stories social media widget and section added.
  • More descriptive copy added underneath 'Daily Coping Mechanisms' assets.
  • Interactive Toilet map added above footer.



Case studies page is no longer in use, and was later replaced by the IBS stories social media widget located on the support page. This works better as it takes up less room in comparison and reduces the overall amount of website pages.


Popular posts from this blog

Handmaids Tale Experimentation

By -
Image
As this is a ballet adaptation, I thought perhaps I could use ballet shoes as a motif. I'm going to try to avoid making this look cliché. If this doesn't work, I may play around with the additional photograph that Dean provided us with. I purchased a pair of used old pointe shoes on a reselling app named, 'Depop' and once arrived asked my boyfriend to hold the ribbons of the ballet shoes in different positions. At first I noticed that the natural lighting was extremely dark and dull. Being a complete amateur at photography, logically I needed another light source so decided to use a smartphone camera flashlight to provide this.  We tried the lighting from different angles until we had the flashlight almost face-on to the ballet shoes. This reminded me of being in front of a spotlight at the theatre and created some amazing natural shadows. I thought the introduction of the male hand/arm was synonymous with the controlling men in the Handmaid's Tale.  The main theme ...
Read more

Platform Considerations

By -
Image
During today's introductory lecture, we briefly touched on the Degree Project assignment which got me thinking more in-depth about my final major project. While on placement, there was a large amount of discussion among my peers about our return to University. Hearing other student's ideas resulted in me starting my own thought process into which type of platform or device(s) I wanted to focus on creating for.  Originally, I was considering building an app which would include user research, prototyping and a coded creation. Although this would be an interesting project, this isn't an area I have much knowledge about. I have previous experience creating app mock-ups using myBalsamiq and prototypes using Invision however I have never coded an app before let alone published one. This gap of knowledge may hinder the development of the application and result in an incomplete project. Therefore I'm leaning towards a web design and development project instead. As I have alread...
Read more

Showreel

By -
Image
Using Adobe Premiere Pro, I cut both visual and audio elements together to suit the length of the showreel. As the video shouldn't be anymore than a minute, I decided to keep to this timeframe. This was  actually helpful as it forced me to keep projects that looked impressive or I was most proud of. I've happy with my showreel as I feel that there isn't any filler and I managed to add quite a lot of movement considering some of my work are stills/print based. After completing my showreel, I uploaded this to YouTube where I featured this on my channel. This means that my showreel will be the fist video that potential subscribers/employers will see. I decided to use a song named, Shelter by Porter Robinson & Madeon. With permission from Dean, we were allowed to use a published song or soundtrack. I liked this song in particular because it was upbeat and I thought it sounded as though at intervals that the song repeated 'wonderful' which is how I would like my work...
Read more