In this lecture, we'll introduce the first major deliverable of the course and we'll briefly introduce an overview of some design related topics. This lesson will cover visual perception, Gestalt theory, design principles, patterns and tools. We'll introduce best practice design and prototyping tools that will help you in completing the first major deliverable of the course, and in any future project work that you may undertake as part of your study program and beyond.
According to Steve Krug, usabilityt is a quality that makes a product: Useful. Is it something that people need? Learnable. Can people figure out how to use it? Memorable. Do people need to re-learn how to use the product? Effective/Efficient. Does it get the job done with a reasonable amount of time and effort? Desirable. Is this something that people want? Delightful. Is using it enjoyable, delightful, pleasing or even fun?
Heuristics are broad rules of thumb to consider when designing and evaluating user interfaces.
Our eyes and our minds are our tools of perception. We can intuitively sense that good design and bad design can be boiled down to an understanding of perception.
Human perception is dictated by relationships: how things stand out or blend in; how things are similar and dissimilar; and how they contrast and blend with one another. It dictates how hierarchies are formed based on the way we organise things. It gives us the separation of attention from noise, and content from context.
Gestalt principles will guide you on how to do that. How to create hierarchy; when and where to use delineation; understand how contrast and similarity can be used to create pleasing, clear and concise visual explanations of your design. An understanding of Gestalt principles simplifies the design process, allowing you to much better articulate your creative ideas.
Design Elements vs. Design Principles: Design principles are rules that you should always consider when creating your design, whereas design elements are the actual components that make up a design. As a designer, it’s important to understand the various elements of design, while considering best practice principles in applying them.
Figma is used to design, prototype and share designs in real time, draw lines, shapes, boxes and place content, images and text, layout using gridlines and auto-layout tools, scale designs and components so it is easy / possible to create responsive designs.Figma can also be used to abstract commonly used pieces of a design (such as buttons or menu bars) into components: therefore promoting reuse and principles of DRY (“Don’t Repeat Yourself”).
Web developers must learn to design for various device sizes: desktops, tablets and mobile phones. Responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size of the viewer. It prevents that images are larger than the screen width, so visitors on mobile devices will see a visually attractive website as well
The primary way of making a responsive website is by writing custom CSS code that makes it so. This can be done using media queries: CSS instructions that only apply to certain screen sizes.
- Kurt Kofka: Principles of Gestalt Psychology, 1999
- Usability Heuristics by Jacob Nielsen
- Steve Krug: Don't Make Me Think, 2000
- Figma beginners guide
- Responsive Design
- Introduction to Media Queries
- All you need to know about colors in UI Design — theory & practice
- The Role of Color in UX
- Color theory
- Typography Elements Everyone Needs to Understand
- Google Fonts
- A Visual Type Scale -font-size
- Complete guide to mobile first design
- Design an Error Handling System before you structure your App or Software Project (Part I)