The document defines various UX/UI terminology including:
- The F-shaped pattern which shows how users' eyes scan webpages and screens in the shape of an F.
- Sketching which is quick freehand drawing to help brainstorm and note ideas visually.
- Wireframes which are blueprints of screen content and layout.
- Mockups which are static representations of products that cannot be interacted with.
- Prototypes which are preliminary models used for testing.
1. Tuesday the 24th of September 2019
Fundamental Design Module
UX/UI Terminology:
F-Shaped Pattern:
This is eye tracking research shows that people scan webpages and phone screens in
various patterns, one of them being the shape of the letter F.
Sketching:
Sketching is quick freehand drawing intended to help us brainstorm and jot down ideas.
This is a visual way of note taking.
Wireframe:
The blueprint of a screen. This can be from the content and lay out of a website etc.
Mockup:
Mockups are static representations of a product. You can’t click through them or interact
with them. They are essentially a picture of what the product will look like.
Prototype:
A prototype is a preliminary model of our product used for testing.
Accessibility:
Accessibility or accessible design is a design process that enables people with disabilities
to interact with a product. This means designing for people who are colour blind, blind,
deaf, and people with cognitive disabilities, among others.
Golden Ratio:
The golden ratio is a mathematical proportion between the elements of different sizes
which is thought to be the most aesthetically pleasing for human eyes. This tends to be
associated with sea-shell shaped spirals.
Grid:
Grids systems are organisational tools that help us arrange content on a screen. They are
made up of vertical and horizontal lines.
Colour Wheel:
A circle with different coloured sectors used to show the relationship between colours.
Corporate identity guidelines:
A corporate identity manual is a manual containing guidelines for corporate
identity applications. It is a corporate identity management tool. It is used to ensure
correct application of the corporate identity following its implementation.
Dots Per Inch (DPI):
DPI (dots per inch) refers to the output resolution of a printer or imagesetter, and PPI (pixels
per inch) refers to the input resolution of a photograph or image.
Mindmap:
A mind map tends to be a written ideas. It is often created around a single concept,
drawn as an image in the center of a blank page, to which associated representations of
ideas such as images, words and parts of words are added.
2. Tuesday the 24th of September 2019
Responsive Web Design:
Responsive Web development is an approach that creates dynamic changes to the
appearance of a website, depending on the screen size and orientation of the device
being used to view it.
Informative Architecture:
The structural design of shared information environments.
Scalable Vector Graphics (SVG):
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-
dimensional graphics with support for interactivity and animation.
Breadcrumbs:
Breadcrumb navigation systems help users understand their location in a website or app.
They’ll show a sequence of steps users have take to get where they are.
Persona:
A persona is a representation of our target user. They aren’t necessarily a real individual
but are constructed using real information and data based on real users.
White Space:
White or negative space refers to the unoccupied or blank space on a page. White or
negative space is used cleverly to shape a cursor.
End Users: Who are we designing the product for? This person is our end user.
User-Centred design (UCD):
UCD, is an iterative design framework in which users and their needs are always kept at
the center of every decision.