Skeuomorphism And Other Fun Things

Lab Work - 27/09/2017

---

Part I - Reviewing This Week's Lectures

Page Layout

1. colspan is used to determine how many columns in a table the cell spans i.e. merges the cell horizontally. An example of the code is outlined below:
<table>
  <tr>
    <td colspan="3">
    "Stephen Has A Great Blog"</td>
  </tr>
  <tr>
    <td>Yes</td>
    <td>No</td>
    <td>Maybe</td>
  </tr>
</table>


rowspan is the same as colspan above except it merges cells vertically. Example below:
<table>
  <tr>
    <td rowspan="3">
    "Stephen Has A Great Blog"</td>
  </tr>
  <tr>
    <td>Yes</td>
  </tr>
  <tr>
    <td>No</td>
  </tr>
  <tr>
    <td>Maybe</td>
  </tr>
</table>

2. Coding tables is a pretty laborious task with a lot of potential pitfalls and syntax errors possible due to the sheer number of tags involved. If not indented sufficiently, it's extraordinarily easily to lose track of  where each cell can be edited and which element belongs in which section of the table.

I guess one positive is that you have total control over every single property of the table, including each individual cell and the table itself as a whole.

4. Cognition - USA Websites

I analysed the following websites:

1. The Wall Street Journal
2. The Washington Post
3. The LA Times
4. The New York Post

The four similarities I found are as follows:

1. They are all most definitely flat designed websites.
2. They all have a clean, white background for clarity.
3. Each has expandable sections and menus in order to prevent cluttered menus.
4. Each website has a frozen header which stays at the top of the screen as the page moves.

5. Cognition - South African Websites

I analysed the following websites:

1. News24
2. Times Live
3. IOL
4. All Africa

The four similarities I found are as follows:

1. These websites seem to have an old style, more archaic feel.
2. They all have either expandable menus or burger menus or both.
3. The homepage of each of these websites is huge in order to fit in the vast number of sections needed.
4. The websites are pretty flat but contain some old style shadows and remnants of skeuomorphism in places.

5. Cognition - Differences

• I think the USA websites are a lot flatter, cleaner and more modern looking that the South African websites.
• The South African websites all have options for translation into different languages which reflects their particular cultural needs.
• It seems to me that the South African websites are narrower than the USA ones which leads me to believe that they are made for smaller, narrower screens perhaps reflecting the gulf in popular devices in the two countries.

7. UI Design

a. Flat Design is a two dimensional, minimalist type of design that is generally displayed using squares or rectangles to create symmetry and neatly boxed off areas. The use of very basic, simple icons is also prevalent. It's designed to be fast loading, low on processing, stylish, aesthetic and to be unintimidating to the end user.

Flat Design has been criticised for having too much focus on aesthetics and too little focus on usability. In extreme cases, there seems to be a loss of functionality and instead, a fashionable, difficult to use but awe-inspiring look.

Apple's website (here) is a prime example of a website that uses Flat Design. The navigation bar is flattened so much that it may take some users a second to realise it's a clickable menu at all. As you scroll down, all the sections are neatly boxed off into squares and rectangles. It almost feels like the website was created by a person who has O.C.D. purely related to symmetry and minimalistic design.

The current Apple website. This was very different a few years ago when design trends were different.

b. Skeuomorphism or skeuomorphic design is based on the premise that people will find interfaces more intuitive if they can relate them to real life - it's a metaphoric design. An example of this would be a website selling books that has 3D book-like graphics displayed on a wooden book shelf where the books interact with the user in a similar way to the physical world ala the old iOS "iBooks" app.

While this is highly intuitive for users, it's also clunky and slow due to heavy processing loads and the design is often cluttered. This often leads to a negative user experience (UX), hence the shift to flat design.

The old iOS iBooks App. You can see the shelves look 3D due to shadowing and the books move when clicked.

The current trend seems to be going towards a bit of a mix between flat and skeuomorphic design. In recent years, design has flattened far too much leaving the end users in the lurch. Designers are beginning to fatten up the flat designs by creating small shadows around buttons again in order to distinguish buttons from simple blocks and in general creating some design depth. This is known in some circles as "flat 2.0" and we're going to be seeing more and more websites designed this way in the future.

Follow me on Twitter: