Designing Pixel-Perfect UI 2-day course

Date to be confirmed
London
Beginners–Intermediate
£159–£159 + VAT

View ticket options

Screenshot of the course running remotely

Currently courses run remotely with live video, hands-on exercises & real-time tutor interaction.

What's on

An insightful, hands-on & affordable 2-day crash course on User Interface design.

We cover User Interface design principles, wireframing in Sketch & Figma and prototyping using InVision.

Who runs it

15+ years of experience UX & UI designer Sergei Golubev working with Microsoft, Heathrow and British Gas.

Day 1 — UI design

You'll learn the base User Interface design principles, how to make your UI responsive and accessible, create an icon font and a style guide, and more. Show more Show less

UI design principles & process
to understand where User Interface design sits in a process and essential design fundamentals
typography and importance of content design
knowing when to use px and em, n-dash and m-dash, how to embed fonts and to avoid faux fonts, making your content legible
accessibility
to make sure you design complies with industry-standard Web Content Accessibility Guidelines (WCAG)
iconography
how to create a scalable and maintainable icon font, and make your icons meaningful and sharp
graphics
understanding which media format to use when (raster versus vector), and how to optimise it for the best performance
layout using responsive grid
to make sure your design works across different devices, benefitting from mobile-first approach
styling and design systems
creating a style guide of UI elements to have consistent design across your systems, overview of design libraries
designing with development in mind
to ensure your design is technically feasible to implement, understanding technical constraints

Show more Show less

The School of UX, Designing Pixel-Perfect UI course slide example

Day 2 — Rapid Wireframing & Prototyping

At this workshop you'll create an interactive prototype of a mobile website using Sketch, Figma and InVision, which you'll then run and test on your mobile phone. Show more Show less

structuring content
emphasising the importance of starting design with content (not chrome), which is most relevant to users
creating layout in Figma and Sketch apps
to visualise concepts bearing in mind different device form factors, including designing responsive UI for mobile
embedding fonts, icons and graphics
to prepare all the assets for prototyping stage and handover to developers
prototyping using InVision
creating interactive rapid prototype (no code behind) to be use in-browser as well as real device, optimising for touch
testing on a real device
sharing, testing and giving feedback on a working rapid prototype on your mobile phones
review of UI design tools
overview of the most commonly used apps used by User Interface designers on the market