Assignment 1: The review of my entire wordpress and course work.

The PDF below is a view of all the course work i have completed with toast, the website design and the logo changes/reviews i have recieved.

assignment 1

Assignment 1: The review of my entire wordpress and course work.

Final Logo design

I have been working on the logo after this review sheet: logo review. It has made me come up with some new and better ideas for the logo and below is some prototypes of the new logo until i came across the final one which is displayed below as a bigger picture.logo 3 logo 4

Final Logo design

Logo Development

So for an assignment on screen design we, one aspect was to design a logo for the theoretical website that we would produce. The original Logo looked like this:logo

while the newer logo variations that have been made look like this:

logo 2

The differences made was changing the location of the text. As the issue was where to put the text as, when the logo is shrunk the text would be unreadable (which to be perfectly honest wasn’t an issue to begin with as the text wasn’t meant to be pinnacle to the design but just something to add “character”). The new logo shows two different variations. it is intended for its use in different settings with the text sitting inside the logo (above the head and on the blue) and when it is a smaller size the text will appear above the logo. the change in the text colour is also made so it can fit any site colour/where colour clashes so the logo will be used effectively as possible.

Logo Development

Users and their Scenarios.

This week’s lecture is on the topic User Scenarios. Which is a breakdown of all the steps a user would use/do when they are using your site. The example given is about a woman named Angela who wanted to find her favourite coffee shop in an airport she is not familiar with.

We are then shown the steps she would take, uses a device that lists all the coffee shops in that airport. She then selects which coffee shop she wishes to visit and then is shown a map with a directory to the said coffee shop. The lecture is an extension of last week’s lecture which is about user persona’s. so, there isn’t much to write about this week’s lecture as it is really all self-explanatory when designing a website as its focus is how will a user use the site and how simple/easy will it be for them to use it?

Users and their Scenarios.

UI Visual Design

ux vs uiThe final lecture of this course is UI Visual Design Patterns, it focuses on navigation patterns.

So, what does this mean? It is how the site looks, feels and what exactly it is that the user is doing or using on the site. Things that are included are the various types of navigation patters. Which are Tabs, Dropdown Menus, Drawer Menus, Search Bar with Dropdown, Big Footer, Home, breadcrumbs. Below is a screenshot from the lecture that breaks down some each type of navigation menu.

nav patterns.JPG

so when does someone know when to use what menu navigation for what they are doing? It is rather simple once you learn what each ones’ purpose is. Here is a break down for each different type of menu navigation that has been listed.

  • Tab: for splitting information into sections when there is a lot of information (between 2 to 9 different sections) and the names for each section is short named.
  • Dropdown menus: is used for when a user needs to navigate through sections of a website, but there is a limitation in space (so ideally used with mobile devices). It is used when there are 2 to 9 different sections and all the sections are placed within hierarchy order.
  • Drawer menus: used for space saving and uses icons as menu navigations which open to show what the name of the navigation icon is (think hamburger menu).
  • Search Bar with Dropdown: adds a shortcut that allows the user to search for what it is exactly they want to find. It is based on a hierarchy order and is a shortcut to jump between sections.
  • Big Footer: the footer at the bottom of a page that shortcuts to different sections of the site.
  • Home: the sites logo or home button goes to the homepage or a safe space.
  • Breadcrumbs: used when a user needs to know their history, location and relation to a site displaying the track the user has gone to get to where they are. An example of this is any news site when the user goes through the site.

There are other types of navigation patterns. this has been covered within previous lectures and posts which is how the user goes through a site and showcases features, adds items and encourages interactivity with the user. The screenshot below. from the lecture, shows an example of content navigation pattern called a Carousel.


There are also tags (typically blue texts) that float on a page and are various sizes which use keywords that jump to different sections of a page.

This wraps up the lectures for this course as there is no more lectures and sadly this means that the weekly lecture posts have to stop.

UI Visual Design