Guide: Design - UI Fundamentals
Description
👉 This guide is part of the Design Introduction Guides. Please follow the order:
- Design fundamentals
- Branding
- UI Fundamentals
The topics covered in this Guide are just an introduction to the subject, and you should strive to get better and better at them with each project or demo you put out. You will learn Figma, a popular design and prototyping tool, along with the fundamental concepts behind creating a website interface.
Knowledge
- Understand what is a mood board
- Understand what is a user interface
- Understand what is Wireframing and Prototyping
- Understand what is a style guide
Skills
- Be able to create a mood board
- Be able to create a UI by creating sketches, wireframes, finally prototypes
- Be able to create a style guide
Topics
- Research & Moodboards
- Sketching, Wireframing & Prototyping
- Figma or similar
- UI Grids and Composition
- Style guides
- UI Components Library
Action Points
- Take on a crash course about Figma
- Learn what is a mood board and create one for a topic of your choice
- Learn what is sketching and wireframing and create a sketches and wireframes for a small project
- Find out how to use grids and composition techniques in an UI
- Learn what is a style guide for web projects and find examples online
Deliverable: UI Prep files
- Submit:
- Github repository (for non-Figma files)
- Figma Project URL
- Minimum requirements:
- Create all the preparation work to create an User Interface
- Include a file containing a written overview (briefing), goals and strategy for the work on this project
- Include a Moodboard in the Figma Project
- Include all sketches, wireframes and UI design in the Figma Project
- Include a Style Guide file