User Experience
To begin this project, as a group we created presentations of research into good and bad web design. We based our criteria for what made a website good or bad on Design Shack’s “10 Web Design Commandments”. https://designshack.net/articles/layouts/10-web-design-commandments/ These commandments included consistency, use of grids and white space, accessibility and patterns. By looking at a variety of websites and comparing these elements (as a group and, further, alone), I was able to get a greater understanding of how to create a website which will easy to use visually appealing.
National Geographic
Throughout the website, National Geographic has a consistent, modular style which uses a clear grid and a lot of white space. The design allows the site to focus the user’s attention on their main focus, interesting stories with beautiful images. The website is animated so that all of the links will move in a calm, sweeping motion in time with the users scrolling which feels similar to physically moving the magazine pages in the paper copy.
In order to make it easier to navigate around the site, the navigation bar appears at the top of the site as soon as you scroll up to stop the user having to scroll all the way to the top of a story. This bar uses the top left corner as a home button (yellow rectangle) which is reflected throughout most of the variants of the National Geographic website. However, the right side with the navigational element changes and is inconsistent with the rest of the site (i.e. https://www.nationalgeographic.com/tv/).
The images and graphics in the site have all got a very high resolution or are vectors to ensure that they translate across devices of all sizes. A mobile version of the site has also been created, which is incredibly similar to the desktop site but is tailored to fit the smaller, vertical screens.
National Geographic’s social media presence is limited to posts with links about their stories however they have a consistent style with their main pages. By the same logos and large images, it recreates their website and ties them together. Their is inconsistency with this on their instagram which has a different profile picture. However, they make full use of instagram’s photo sharing concept by posting mini photostories which aren’t always worthy of a full article.
Yale School of Art
For a world renowned art college, you’d think that Yale School of Art would have a beautiful website. Instead, this is what you will find when looking them up. The design is like something from the early days of the internet. There is varying sized text boxes, blue hyperlinks, clashing colours and semi transparent gradients. And, of course, the endless gifs and bizarre photos used as a background. The design has no sense of hierarchy and has issues with contrast which can make some text illegible. The site only has one version, making it pretty impossible to use on a phone and inaccessible to a lot of people.
The site looks like a lot at once, but the actual navigation throughout the site is very easy. All the pages are linked on the navigation bar on the side and it’s always in the same place and doesn’t have any animations which could take some time to load in poor internet connections. But, unfortunately this means you do need to scroll to the top every time to move. The footer offers almost nothing useful except a short statement and a couple of links.
What is interesting about this site is a wiki which is constantly updated by the students and staff. They have intentionally made it look this way for a bit of fun. Whilst it is a mostly terrible website, I kind of like it.
