Screen-Based Design LT 2.1 – Defining User Interface Design

  • Post author:
  • Post published:16 August 2022

In the first lesson task we had to look at an example of a website with bad user interface ( and create a list of things that we would change about it to make it better. 

I would say that the main problem of the website is the lack of hierarchy; As a viewer you have no idea where to start looking, because all elements on the screen are craving for attention. This would have to be the first point to be fixed, which will include adjustments  both to the use of color, fonts, imagery, placement and scale of elements — practically the whole website would have to be redone.

To get more specific on some individual operations that could be done in favour of the website’s design and to achieve a better user interface, I’ve made this list:

  • Stick to two fonts (and no Comic Sans or outdated default HTML-fonts)
  • Create a color scheme that consists of less vibrant, contrasting colors
  • Remove the repeating background image entirely; use a single color (or gradient) instead to avoid the background taking focus away from the foreground elements
  • Remove all animations; they take up a lot of focus for no reason
  • Create a main navigation bar instead of having links spread all over the page
  • Create a standard visual appearance for links, so that the viewer know what is clickable text and what is not
  • Fix the width of the page so that it fits the browser
  • Split the content of the site into comprehensive boxes

Leave a Reply