Design language can sometimes be hard to synthesize, here is list of vocabulary and some design concepts.
Ideation – get as many ideas as possible, emphasis is on quantity. Take the idea, sketch it (express it) and explore the idea. Idea can take many forms from table to wireframes (rough sketch) to more formalized document.
Artifacts – Design documents are called Artifacts. These are bi-products of the design.
DEISGN is Users, Context, Tools, Tasks and Goals.
Interaction Design – This focuses on tools and the task. Use the tools to achieve the tasks.
1. User Needs Statement – The Who, the What and the Why. Who may be the name or the role, what are they doing it and what are they valuing it. This can be used in feature prioritization, design principles etc.
2. Information Architecture – Structuring information, what the user do in each space, how the user moves between the spaces. Designs the structure of the experience.
3. Storyboard – Presenting a sequence of annotated images to go through the entire experience, i.e. move from opening the app to performing the task, generating the output and all the way up to closing the application.
4. Affordance – Object must be able to suggest how it should be used. There should be something about the object that tells how it should be used.
Visual Design – Communicates the nature of the object.
1. Grids – Foundational principles of design that allow for greater speed and confidence. Divides a space into smaller component.
2. Margins – The area between the content and the edges of the screen.
3. Gutter – Denotes the space between the column.
The Grid, Margin and Gutter together convey the layout of the page.
4. Aspect Ratio – 2: 1 implies the width is twice as long as the height.
5. White space – The unmarked area of the pages.
6. Hierarchy – A classification of things per their importance (priority level). Margin may be bigger than gutter due to the hierarchy.
7. Zhoosh – Spruce something up, improve something.
Sans in French means without, Serif are the strokes the end of the work. Slab is a type of the serif – it has blunt rectangular end. Times New Roman is suitable for screens that are coarser in resolution. Also useful when lot of words are to put in together.
1.Baseline – The line on which all lowercase letters sit.
2.x height – Distance between the baseline and middle of the letter.
3.Leading – Space from baseline to baseline.
4. Kerning – Space between the letters.
5. lorem ispum – placeholder for the text (don’t read me just look at me).
Motion design is where, design becomes code based.
Responsive Interaction – How does an affordance reach when interacted with. Communicate a very short story (may be even 1 second).
Motion should always feel natural. Things should accelerate, decelerate and change direction in a natural way.
Janky – Anything that’s unnatural, unreliable.
Let us use all the tools to ensure our designs are not Janky.
1. https://www.youtube.com/watch?v=80hrknwD74Q [Google IO – 2016]