UI Design Bootcamp. Master Typography, Colour & Grids
- Descrição
- Currículo
- FAQ
- Revisões
The most crucial aspect to form a great user experience is having a beautifully crafted user interface. Some small changes to your aesthetics can have a huge impact on the experience of your users.
If you’re designing using a web application, you’re making decisions about typography, colour and composition that will affect the branding, style, usability and user experience of your application. You’re already making these decisions but are you aware of their impact. Very subtle use of typography and colour can have enough personality that we don’t need any other visuals. We can give life to a dull block of text and it can make it easier or harder for our users to read. Getting a few simple choices right can make or break the application.
Typography is 95% of what we see on a web application, it dictates every other design decision. yet few people really stop to learn how to use typography to their advantage.
Colour is what makes us differentiate everything in a design. If there was no colour we’d not be able to identify anything on a design. But it also has the most emotional connection of anything in a design and it can’t be easily categorised, as colours appear very different depending on their use and context. We have to use colour, so let’s learn to use colour to our advantage.
A grid makes our designs feel uniform. If we know how to use one, it’s the single thing that can make a design instantly feel more professional. But we need to understand the limitations and advantages of recent web development to create a grid that looks good on paper and still looks good on the web.
What do I get in this course?
To improve your skill in each of these areas: you’ll do a combination of learning some underlining theory, complete challenges to improve your intuition and some practical exercises to create some great-looking designs. A short description of each module is below.
-
Composition: practical exercises to improve your intuition when placing elements on a page
-
Typography: History and background of different type classifications
-
Selecting and Pairing: How to choose a typeface and how to select complimentary typefaces that work together
-
Readability: How do we read and how can we make it easier for people to read with our typographic choices
-
Styling & Formatting: What extra style can we add to our typography and how can we use this to improve our visual hierarchy
-
Grid Systems: The types of grids used in design and some of the technical limitations for modern application design
-
Building our Grid: How to ensure we set up the grids in our design software to work when developing applications
-
Colour Interactions: practical exercises to improve our intuitive use of colour when used in different contexts
-
How Colour Works: The physics behind how light works and how it creates colour
-
Colour Attributes: How to make changes to a colour to make it more useful in your design
-
Create our Pallet: practical steps to create a colour pallet that works specifically for UI
-
Visual Language: Choose photos, icons, illustrations and other visuals to support the design
Is this course for me?
Ideally, you’ll already have spent some time designing websites and/or applications. Every aspect of the course is created with beginners in mind but you may find you get more out of the course if you’ve already created some designs. You’ll also ideally need to know how to use some design software. I recommend Figma, but Adobe XD, Invission Studio, Sketch or some similar software will also be okay.
The course is created with designers in mind but it may also be of interest to front-end developers or product owners. There is a money-back guarantee with no questions asked and you can message me with any specific questions.
-
15Importance of TypographyVídeo Aula
-
16Typeface or FontsVídeo Aula
-
17Web TypographyVídeo Aula
-
18Non Verbal CommunicationVídeo Aula
-
19Anatomy of TypeVídeo Aula
-
20Printing PressVídeo Aula
-
21Serif TypefaceVídeo Aula
-
22Sans Serif TypefaceVídeo Aula
-
23Understanding TypographyQuestionário
Test if you've understood the terminology of typography before you continue.
-
24Describe A TypefaceTexto
-
25SummaryVídeo Aula
-
26InspirationVídeo Aula
-
27Define The BrandVídeo Aula
-
28Font ShopsVídeo Aula
-
29Body TextVídeo Aula
-
30Select A Body TypefaceTexto
-
31Single TypefaceVídeo Aula
-
32Display TextVídeo Aula
-
33Select A Display TextTexto
-
34Meta InformationVídeo Aula
-
35Font PairingVídeo Aula
-
36Font Pairing PracticeVídeo Aula
-
37Create A Font PairTexto
-
38SummaryVídeo Aula
-
39How We ReadVídeo Aula
-
40ReadabilityVídeo Aula
-
41Aspect RatioVídeo Aula
-
42Viewing DistanceVídeo Aula
-
43Body Font Size for ReadabilityTexto
-
44Large TextVídeo Aula
-
45Line LengthVídeo Aula
-
46Line HeightVídeo Aula
-
47LocalisationVídeo Aula
-
48Readability QuizQuestionário
-
49SummaryVídeo Aula
-
50Vertical GridVídeo Aula
-
51Visual HierarchyVídeo Aula
-
52Type ScaleVídeo Aula
-
53Create A Type ScaleVídeo Aula
-
54Create A Type ScaleTexto
-
55Create A Type Scale ChallangeVídeo Aula
-
56Type Hierarchy ChallengeTexto
-
57Design SystemsVídeo Aula
-
58FigmaVídeo Aula
-
59SketchVídeo Aula
-
60Other SoftwareVídeo Aula
-
61StylingVídeo Aula
-
62LigaturesVídeo Aula
-
63Small CapsVídeo Aula
-
64Letter SpacingVídeo Aula
-
65KerningVídeo Aula
-
66Paragraph AlignmentVídeo Aula
-
67Numbers and DateVídeo Aula
-
68Typographic SystemsVídeo Aula
-
69Create A Typographic SystemTexto
-
70SummaryVídeo Aula
-
71GeometryVídeo Aula
-
72Types of GridVídeo Aula
-
73Importance of GridsVídeo Aula
-
74Box ModalVídeo Aula
-
75Flex BoxVídeo Aula
-
76Css GridVídeo Aula
-
77Responsive vs FluidVídeo Aula
-
78Anatomy of a Grid - Part 1Vídeo Aula
-
79Anatomy of a Grid - Part 2Vídeo Aula
-
80Grid QuizQuestionário
-
81SummaryVídeo Aula
