While 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.
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!
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:
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.
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.
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!
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.
Next, we take a look at full project refactoring, i.e. how to improve already-existing UIs. We start with this ugly UI:
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.
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.
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.
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.
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.
This chapter takes us through how to make great forms - a skill which requires solid design and UX fundamentals.
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.
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.
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.
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!
Happy learning :)