PerWhile we can all clearly recognize what a great user interface looks like, it's actually really hard to build one! As a result, tons of websites out there are ugly to look at and feel clunky to use.
Which is why I'm really happy to announce that we're launching a full-blown UI Design Bootcamp. at Scrimba today.
In it, you'll learn how to build great UIs using the tools developers know best: HTML & CSS. You'll learn it through 100 interactive coding screencasts, and a ton of hands-on exercises where you'll actually build UIs for yourself, with the guidance of instructor Gary Simon.
Intro to the Instructor
Gary Simon has been a UI/UX designer and frontend developer for 20 years, and he also runs a popular Youtube channel called 'DesignCourse' with over 500,000 subscribers and has written almost 100 courses on UI/UX and frontend development.
Now let's dive into the course!
UI Design Fundamentals
In this chapter, Gary shows us the seven UI design fundamentals; white space, alignment, contrast, scale, typography, color, and visual hierarchy. At the end of this section, you'll be equipped to complete the module's final challenge - to transform this questionable UI into something great:
Click the bad UI to see how you can improve it.
A Simple Layout
In this chapter, we move on from refactoring existing UI designs to creating great new designs from scratch using our newfound knowledge of UI design fundamentals!
To ease us into working with UI, we work with a very simple layout consisting of a <p> tag, an <h1> and some <spans> alongside their corresponding CSS rule sets.
Click the image to go to the chapter.
The module runs us through applying the design fundamentals, changing the background, using multi-column layouts and working with photographs. In true Scrimba tradition, there are plenty of interactive challenges along the way.
Responsive Design
Next up, we take a look at another essential aspect of UI, responsive design. The chapter kicks off with defining the HTML before moving onto mobile-first CSS and finally looking at how UI can be scaled up to look great on all screen sizes!
Click the great mobile UI to see the chapter.
Responsive Navigations
In this chapter, we expand our knowledge of responsiveness by working with navigations to ensure that they work well across all devices. Gary shows us how to write the HTML, create the CSS for a mobile nav, scale it up to other sizes, use JS to make mobile menus work and animate them with CSS transitions. Finally, we have a design challenge in which we create a sub-menu.
Click the mobile navigation image to go to the chapter.
Full Project Refactoring
Next, we take a look at full project refactoring, i.e. how to improve already-existing UIs. We start with this ugly UI:
Click the bad UI to access the chapter.
Having shown us an example of what not to do when designing UI, Gary then runs us through how to improve it by using the UI design fundamentals we learned earlier and adding media queries to make it responsive.
Tea UI Design Project
Now that we have some experience in refactoring existing designs, our next challenge is to create a UI design from scratch, namely a landing page for a tea website.
Click the image to see the chapter.
Gary helps us with defining the HTML and sets us up with challenges to create the mobile design, before scaling it up to tablet and desktop.
Shadows
In the next few casts, we'll take a look at an important element of UI design - shadows. Gary shows us hard and soft drop shadows, colored shadows, multi-layered shadows and using shadows to define containers.
Click the shadow example to access the chapter.
Gradients
Next up, Gary introduces us to gradients - transitions between two or more colors. The chapter gives us a series of challenges which show us basic, button and card gradients and how to create light gradient variations.
Click the gradients to go to the chapter.
Forms
This chapter takes us through how to make great forms - a skill which requires solid design and UX fundamentals.
Click the form advice to go to the chapter.
Gary starts by running through a few basic dos and don'ts when it comes to creating forms. By the end of the chapter, we are fully versed in creating responsive, accessible forms with custom form elements.
UI Animation
The final skill we learn in the course is UI animation, which can have a big impact on the user experience, positive or negative. With that in mind, Gary shows us a few animation essentials before challenging us to create a simple hover animation and a UI which animates on pageload.
Next, he introduces us to GreenSock Animation Platform (GSAP) - a series of libraries for creating robust animations in your user interface.
Click GSAP to view the chapter.
Final Project
Congratulations on making it this far in the course! The final chapter is a summary project, which is a great way of solidifying and embedding the UI design skills we have learned.
The project consists of a multi-page, responsive web design with a landing page and a subpage.
Click the project features to go to the chapter.
Wrap Up
Well done, you've made it to the end of the UI design course! You are now equipped with everything you need to make beautiful, functional and accessible UIs for all kinds of apps and websites. The world is your UI design oyster!
When you're ready to expand your skill set even further, Scrimba has a ton of interactive courses to help you continue your coding journey, so check them out!
Click above to see Scrimba's full range of courses
Happy learning :)
