Introducing: The UI Design Bootcamp

Per - May 18 '20 - - Dev Community

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.

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:

Bad UI Challenge
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.

Intro to building a simple layout
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!

Mobile-first design
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.

Mobile navigation
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:

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.

Tea landing page challenge
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.

Good shadow usage
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.

Different types of gradient
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.

Form dos and don'ts
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.

GreenSock Animation Platform
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.

UI design final project
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!

Some of Scrimba's courses
Click above to see Scrimba's full range of courses

Happy learning :)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .