Platforms and Experiences

It important to note that experiences should differ from device to device in the sense that computers have a larger screen estate available with more power in comparison to the smaller devices. This means that there are things that are important for each device, and about how they should help their user, this is what this post aims to identify.

AirBnb

Airbnb a service allowing users to book holidays etc online. It is a site allowing users to browse a store like experience viewing properties to rent in the cities they want to visit.

When landing on the desktop homepage, the user is greeted with the following page. It is a page that has an infinitite scroll of content available to the user, consisting of the different experiences available to the user.screencapture-airbnb-co-uk-1479671570492

What you notice on the mobile version is very different. You see there are less options in experiences available and menu has been condensed into a drop down.

screenshot_20161120-194756screenshot_20161120-194821

screenshot_20161120-195050

Once the user selects a place to visit (in this case Paris) they are greeted with list of places of to visit. This is the desktop version;

screencapture-airbnb-co-uk-s-paris-france-1479672194295

and the mobile version;screenshot_20161120-195130

Again the differences are obvious. the mobile has a lot les information instantly visable, the user has to search or scroll on the mobile to discover content. It is also important to note that desktop content just doesnt have the same issues with space so it is capable of filling the screen with even more information for the user.

 

Advertisement

Google’s Arts & Cultures App

Google created a service for learning about arts and cultures online. It is a fantastic tool to learn about many of the different categories from ‘Artists’ to ‘Historical Figures’.

The homepage introduces the user to the site with a banner image explaining the site, and gives them a ‘Daily digest’ consisting of intersting subjects.

Screen Shot 2016-10-23 at 19.35.59.png

Along the left tab you have partners, who are the people responsible for providing Google with the content;

screen-shot-2016-10-23-at-19-37-48

Once you have selected the subject you want to look at, the site gives you a description along with the different exhibits about that subject;screen-shot-2016-10-23-at-19-39-59screen-shot-2016-10-23-at-19-40-21

Once an exhibit has been chosen, the site uses images and text to portray information about the subject to the user, as can be seen below;screen-shot-2016-10-23-at-19-40-42screen-shot-2016-10-23-at-19-40-46

Artists are shown similarly with a slight difference. The artists are listed alphabetically or by a time format in a timeline.

screen-shot-2016-10-23-at-19-47-31screen-shot-2016-10-23-at-19-47-47

Again, selecting a specific artist allows you to read a short description about them and then also view their work.screen-shot-2016-10-23-at-19-50-16screen-shot-2016-10-23-at-19-51-11

The same is shown also for Hostorical Events and Public Figures as shown below;

screen-shot-2016-10-23-at-19-57-38screen-shot-2016-10-23-at-19-57-30screen-shot-2016-10-23-at-19-57-12screen-shot-2016-10-23-at-19-56-51screen-shot-2016-10-23-at-19-53-11

screen-shot-2016-10-23-at-19-59-34screen-shot-2016-10-23-at-20-00-28screen-shot-2016-10-23-at-20-00-36

What is very interesting is the places section is broken down into popular areas that can be explored inside by looking at images, 360 degree videos and documents about the area.

screen-shot-2016-10-23-at-20-02-07screen-shot-2016-10-23-at-20-02-17screen-shot-2016-10-23-at-20-02-25screen-shot-2016-10-23-at-20-02-29screen-shot-2016-10-23-at-20-03-07screen-shot-2016-10-23-at-20-04-01screen-shot-2016-10-23-at-20-04-06screen-shot-2016-10-23-at-20-05-13

What is also very interesting is the Google homepage advertised a specific part of history on their homepage with a link to their cultures site, this was interesting to note as it enticed a large demographic of users into the service. Featuring certain days on the homepage of my site could do exactly the same thing.

google

The site was also fully optimised for mobile;

screenshot_20161023-201415screscreenshot_20161023-201404

Testing & Correcting the code

Testing the site for improvements can be done really easily, sites like nibbler offer services for free to check your website and give it an overall rating based on modern website requirements.

When testing the exhibition website, it gave some really interesting feedback. Below are the results of the test, they mean that the site is lacking in quite a few areas. It is great to know that I succeeded in 5/9 areas in which I was tested

MY OVERALL RATING

1.png

NEGATIVES

2-12-32-22-4

POSTIVES

3-13-23-33-43-5

I went back and tried to correct my errors, this is the results of the test after I had fixed the problems to the best of my ability.

I improved the meta tags

Schermata 2016-01-17 alle 19.25.38.png

I reduced the amount of errors;

Schermata 2016-01-17 alle 19.26.57.png

giving me a new overall rating;

Schermata 2016-01-17 alle 19.27.56.png

References;

http://nibbler.silktide.com/en_US/reports/www.scottlewis.eu

Mobile Testing

An important side of the marketability of this website is the amount of users that can access it. This means, that the website must be accessible by multiple devices. Therefore I have tested three of the screens on the website to check if they would work, below are the results.

It is worth noticing that the site looks good and works well on most of the screens but it is important to also note that some of the design stops working on the smaller screens and that the devices are unable to show the site as they have been designed. The best way to get round this is to build a separate design for landscape mobile. Another issue is the fonts, and whether they display correctly, as you can see there is a mixed result from across the different devices. The mobile optimization has worked to a satisfactory level, but has suffered a few issues on smaller screens.

Mobile experience on desktop

Spotify has created an excellent example of my theory of by scaling mobile ui to the desktop we should not loose the design elements that are ready made for mobile. Complete with recognizable icons, design techniques and motion graphics, this website shows how design for the mobile can be used in a desktop experience. Below is my breakdown of how this website does this.

This is the first website that uses a truly transforms the webpage into what feel like a application. The mobile version creates a parallax-like site in which by scrolling down you are sent to a different screen with other options. While this is a nice idea i found to be not very user friendly and quite confusing at times. The color schemes match the different sized screens perfectly and the only slight difference in the experience between the two is the addition of small changes to layout in the larger version of top albums page to allow for extra information about the artist names. Compare the desktop and the mobile versions below.

As you can see this is a really powerful way of displaying content, and there is very little difference in style between the mobile versions on the left and the desktop versions on the right. This is obviously great in terms of marketing as it allows the branding to be correct across all platforms available to the user. This is a must in successful marketing!!

Understanding Grids

I read the book “Making and Breaking the Grid” by Timothy Samara so that I had a better understanding of grids in general. There are many many uses for grids and layouts and I will be able to implement what I have learn’t in this book into almost every aspect of my work.

There is a massive history of grids that date right back to the Romans and Greeks, and whilst this isn’t completely relevant it allows us to understand where the grids came from and how they became what we know and use today.

Early uses of grids were used in architecture to get the correct proportions, which then moved on to design furnishing and everyday household objects, and then into print. In print, grids were used to give structure to a document both visually and spatially. Every grid is split into different sections, these are margins, flow lines, spatial zones, markers, modules and columns. You can see a diagram of what each section represents here;

1

Using different combinations of these sections is what makes every grid slightly different to the other, for example if you have maybe 3 columns with a smaller line length surrounded by large margins and spatial zones, you would have a easily readable page rather than having just one column with a longer line length with smaller margins and spacial zones which would make it much harder to dread and take in. Something to take into consideration due to it’s importance is not only the typeface you use but some of the attributes like size, line height and letter spacing.

Manuscript, Column, Modular and Hierarchical are the four main types of grid, of course there are variations within these categories but they are different enough to understand they have their own use and purpose.

3 8

The manuscript grid is the simplest of the four as it’s structure is designed to accommodate large amounts of text so can be seen in textbooks most commonly, it is also the same structure that is used for writing essays. It doesn’t even have to just consist of text though, images can be used to implement space into the text to give the eye a rest of reading.

5 9

The column grid is probably the most common because of it’s functionality in wide range of aspects, both images and text can be placed within a column grid, and you find that there is a large history of this style of grid in newspapers and magazines and this has seemingly been transferred to the web with such templates as the 960 grid:

2

This grid allows for up to 12 columns on a page, which allows the designer to have much more control over the layout of the page.

4 10

A modular grid is very much similar to a column grid but different in the sense that it also has horizontal flow lines which divide the page into columns into modules. A group of modules can be put together to create spacial zones, which can be allocated different content in a way of having an overall order.

6 7

The hierarchical grid is the last of of the four, it is probably less commonly used grids too. It works much less systematically based on the fact that the elements have their own constrains so they are arranged in such a way they look right on the page but the layout probably wouldn’t work for any other purpose. By using spacing and equal margins you can make elements that are somewhat unorganised become arranged in a presentable manner, you usually this type of layout within posters.

Natwest – Self Promotional Piece

I came across this promotional piece for Natwests mobile banking app, it simulates a mobile phone with the actual leaflet within the screen, then when you open the leaflet it has the relevant content. Something worth noting here is that they have used no more than three colours throughout the piece of marketing. As a web designer I could use this idea to promote what I do, this is something I will consider for part of my promotional piece.

Scan 6Scan 8 Scan 7