First impressions are super important. I will show you how to make the best first impression and show your work in a way that will keep people interested and engaged.

Making engaging presentations

The way you present your UI design can either enhance it or make it seem boring and uninteresting. I will show you how to create mockups the right way.

Creating mockups and grids

Low fidelity wireframes are often neglected and shown in a low-fidelity way. We will explore techniques to keep them engaging and fun to look at while still being lo-fi.

Presenting low-fidelity

Charts and graphs are a great way to show the results of your research in case studies. They can be beautiful to look at and stand out from generic, generated ones.

Beautiful charts and graphs

Data tables and data sets can be shown in a way that makes it easier to connect all the right dots and have an awesome case study.

Data can be beautiful

Spot-on ways to make your projects shine!

How to Present Your Work

UI Presentation | Hype4 Academy

There are hundreds of thousands of designers entering the field each year. Just the Google UX Course alone brought in nearly 300 000 new people. In a crowd like this it's important to stand out, and also to realise that people buy with their eyes. That includes both clients and recruiters. The way you present your work can have a crucial impact on whether someone will even evaluate it, or quickly scroll through it and skip it. In this course you'll learn the visual techniques to help you stand out and make your work more engaging and fun to look at. 

What is the course about and how we will learn together

Introduction

We're starting with the obvious - how to best present your high-fidelity UI designs. This segment covers natural phone mockups, minimal mockups, clay mockups and arranging them into grids, including the 13° principle. Everything you need to start creating beautiful, polished work.

Everything you need to start creating beautiful, polished work.

High-Fidelity Mockups & Grids


Low-fidelity can't be too pretty itself - it would defeat the purpose - but the way you show it can. That way can make all the difference between a lo-fi flow that's interesting to look at, and one that wouldn't turn any heads. Learn how to make the lo-fi shine!

Present low fidelity wireframes

Most case studies are filled with data. It's important to show data tables, charts and graphs in a way that fits your entire portfolio and makes them engaging because the mix of data and design presentation is what gets recruiters to pay attention to you.

Charts and Graphs

Ui Presentation

If you already have some UI designs, you can use them to create a full UX case study. This is like putting the process on its head a little, but it allows you to have a better port

Starting with UI

Learn to do simple market research to show your grasp of the environment your product is on. Then survey your users and plan a basic usability study.

Easy to do research

Show how you planned the flows between the wireframes and how the product comes together as a prototype.

Flows and wireframes

Look at other products in your category. Evaluate their strengths and weaknesses to show that you’re designing with a broad understanding of the market.

Competitive analysis

Combine everything together into a detailed, comprehensive, full case study with a purpose of showing clients and recruiters you understand how design works.

Creating a full, UX Case study

Learn how to create a case study for your UI project!

Create Case Studies for UI Projects

UI Case Study | Hype4 Academy

This is putting the portfolio creation process on its head. We take beautiful, high-fidelity mockups and designs you created as part of your UI challenges, or while just designing for fun, and we'll add a full UX case study to them. This will help you create more case studies for your portfolio faster.

This will help you create more case studies for your portfolio faster.

Let's start the case study with the most important information, following a simple framework. Then let's dive in some quick market research to add some real data to it without too much work.

Let's start the case study with the most important information, following a simple framework.

How to start + Market Research


Competitive analysis is a great way to show your project in context of a broader industry. It's also a great way to expand your case study and show you're not designing in a vacuum. We'll also add a simple user-survey that you can do without much effort, for free. This will show you're listening to the users and have a curious, inquisitive approach to design. Exactly what recruiters need to know.

This will show you what recruiters need to know.

Competitive analysis + User Survey

Here's how you can create personas quickly and in style!

Personas

How to show flow diagrams, low-fidelity wireframes and initial sketches and write an engaging story around them.

Low fidelity wireframes + Flows

A good case study starts with a high-fidelity key visual on the top, and ends with one at the bottom.

High Fidelity UI

This will take a lot of work and effort comparing to other items in the course.

Prototype + Mini Usability Study

Create an accessibility breakdown to adhere to the WCAG contrast rules, and how the design came to be.

Accessibility checkup and wrap up

Ui Case study

You will know how to design a functional and beautiful Mobile App with a variety of screens - including a full login, registration flow, detail pages and more…

Beautiful App Design

You will be able to pick the right fonts and colors for your project. I will share all my techniques for great looking gradients, color combinations and more.

Fonts, colors, gradients

Shadows and inner-shadows are a great tool to make your designs look better - if done right! Let’s explore how to use them to our advantage!

Using effects

Decoration is everything that makes your product unique, and compliments all the standard, well-known UI patterns your app needs to have.

Applying decoration

I will share with you my entire high-fidelity workflow, including all the tips and tricks I’ve learned over the course of my 20 years of Product Design experience.

My workflow

Learn how to bring your mobile app UI’s to another level of fidelity. In this course I’ll share all my tips, tricks and techniques to boost the visual quality of your projects.

Going High Fidelity: UI in Mobile Apps

High Fidelity | Hype4 Academy

Play around with dark mode and glassmorphism to be comfortable with the effect

Effects exercise 1

A simple exercise in blurs, overlays and Aurora.

Effects exercise 2

Welcome to the High Fidelity in App Design course. In this segment we’ll talk about why high-fidelity is important for success in design. I will also outline the plan for this entire course.

Let’s talk about the common misconception that a beautiful UI design cannot be accessible. You can make accessible and good looking designs, if you follow one simple rule.

A list of most common issues many designers face

Accessibility vs High Fidelity

Before we dive into our app design, let’s play a little with the most popular high-fidelity effects: shadows, inner-shadows and gradients.

My tips and tricks on shadows, inner-shadows and gradients

Effects

Before we start working on individual screens, let's start by creating some individual components like buttons, toggles, switches, form fields, graphs and tabs. In this segment I'm sharing my techniques on the most common high fidelity patterns and ways to potentially explore it further on your own.

Creating high-fidelity buttons, checkboxes and more

Building blocks

Now that we have most of the components done, we can start putting them together into layouts, with a couple of twists to make them a bit more interesting, which will be covered in even more detail in the decoration chapter of the course.

Forms and high-fidelity - best practices and examples


Login & Registration

List and card views are one of the most important elements of a mobile app, so we can't go too crazy with decoration there, or the app will simply be unusable. However, we can still try a couple of creative ways to make those "boring" UI elements shine.

Lists & Cards

Navigation is the most important part of any UI. Learn how to improve it visually, without making it difficult to use.

Best navigation patterns but with creative visual twists

Navigation

The product page is a place where you can be the most creative visually. In this segment we’ll look at many different methods of using images and shapes for an unique and beautiful outcome.

Going high-fidelity on detail pages - multiple versions

Detail pages

Maps are often external images, which makes them difficult to work with. Let’s find out how you can modify your map, make it blend in with the rest of the design better and how to create stunning map overlays.

Map views

In this segment we’ll play around with a couple of high-fidelity overlay types and create a selection of onboarding screens using the techniques from the previous segments

Exploring ways to show layered information

Popups & Onboarding

Decoration is what makes your product unique and original. That’s why it’s important to play around with many techniques and options, including Glassmorphism, Neumorphism, Aurora, Masked photography, 3d objects, 2d objects and patterns. These techniques should provide you with a toolkit to enable further exploration from inspirations found online.

Adding the personal touch to your projects

Decoration

Before the project is done you need to check the contrast levels to make sure the most important UI elements are fully accessible. If you purchased the course with feedback, I also explain how to prepare your screens for the final review.

Final review and accessibility checks before submitting

Review & Accessibility

Accessibility and Final Review

 UI Design Course 2 - High Fidelity

You will know how to design a functional Mobile App with a variety of screens - including a full login, registration flow, map view, modals, lists and many more.

Mobile App Design

You will be able to pick the right fonts and colors for your project. You will know the basics of typography and color psychology to pick the ones that are fully accessible.

Picking the right fonts & colors

You will acknowledge the most common problems in mobile app design. You will know how to spot them and solve them easily to boost the usability of your project.

Problem Solving

You will know to make a blockframe for your project. You will also learn the super usable Red Square Method that will help you align the content perfectly.

Blockframing & aligning

I will share with you my personal design workflow, including all the tips and tricks I’ve learned over the course of my 20 years of Product Design experience.

UI is becoming more and more important in the workplace. Designers that can do high-fidelity visuals are often paid more than their friends who end their work on low⁠-⁠fidelity wireframes.

The complete guide: UI in Mobile Apps

UI in Mobile Apps | Hype4 Academy

In this free chapter of our full UI design course, we'll take a look at JUST the functionality of Figma, that is necessary to start your design practice. Watch this video, then try doing these simple shapes on your own for a day or two.

Figma - The complete basics for beginners

Like the companion UI design book, this course is to the point and practical. 

@TheCarlsonNg

It gave me an easy to follow guide to the world of UI.

@mvarkalyte

@D3vKhaldoon

The most pleasant thing about this course is Michal's method of teaching concepts.

@SolG22

A very well-designed and easy-to-understand course.

@adonias

The #UICourse1 gets right to the point and I could really feel like I was learning fast! I

@rw_rosieway

@tarikeamin

I learn a lot of tricks from your course.

@NaumDV

It was great to learn so many techniques and styles so fast. 

@LauraSka5

@nrkhldh

I love the course as it explains in detail the fundamentals that some of designers might not aware about

@Beatric03776151

One of the best courses around! It saved me a lot of time.

In this video we will talk about the plan for the course. The goal is to establish what we're going to build, how and the entire process behind it.

Before we get to the actual design, it's best to quickly go through the most common issues junior designers face while creating their projects. In the course I will cover the ways of avoiding these problems, but to avoid them it's important to first know what they are.

 Most common problems

Most common problems in UI's with examples and solutions

This is going to be our very first exercise. The goal for Blockframing is to understand that every object on the screen, however irregular it looks, is in fact a rectangular bounding box. Alignment, which is the base of great UI design, is all about stacking these often invisible boxes just the right way.

Blockframing exercise for better alignment understanding

Blockframing exercise

Blockframing, Grid and the Red Square Method

While our imagination may want to run wild, when learning to design it's best to embrace constraints. This is why we propose a curated list of safe fonts and colors - you can pick one of those for your projects.

Work with constraints + pick a theme for your app

Constraints & Theme

Design with Constraints and pick your App Theme

In our first design exercise we'll start with forms, as they're one of the more important, yet very strict elements of any design. Forms need to follow specific rules to convert and be understood. What rules? Watch the video to find out!

Create forms for a login and registration flow

Login and Registration

Lists and cards are likely the most common types of screens in mobile apps. There's rarely an app that doesn't have one of them or both. That's why it's important to learn the best practices about these views, design some alternatives and be ready to implement them in your future designs.

Lists and cards are the most popular screen types in apps

List and Card Views

To get around our app, we need some form of high level navigation. In this part of the course I will talk about two main navigation types for mobile apps - a Tab Bar and a Hamburger Menu. I will also explain when to use which, and which one is a better choice for most designs.

The basic navigation types with examples and good practices

Navigation - Tabs and Hamburger menu

Detail pages are often the most complex visually - in this part of the course we will learn a couple of safe approaches to detail pages, profile pages and more.

Creating detail and profile pages in high fidelity

Detail and Profile

Many apps use location services and display data on a map. In this part of the course, you'll see a couple of techniques on how to make your maps fit your project better, how to structure the views and how big should the map pins really be.

How to add a map view to your project in a good way?

Some actions need an extra confirmation - we use various types of modals and popups for just this purpose. Using the techniques we already learned, we'll create a couple templates that you can later use in your other apps.

Design friendly and usable modals for your project

Modals & Popups

When we have a lot of individual screens designed, it's good to connect them together into a logical flow. While we won't make a clickable prototype here, the goal is to create the top level navigation screens and understand how they relate to the deeper levels of the app.

Create the high level flow using the navigation pattern chosen

High level flow

Navigation basics

Congratulations! Your app is now done. Or is it? Before uploading it to your portfolio, or sending it in for the final review, take one final walkthrough of the whole thing, checking for both accessibility issues and precision. This step is crucial to both passing the course, and having great design skills in your future projects. Design is all about the details!

Video courses

Courses that help beginner designers become true unicorns. Trusted by thousands of designers from around the world.

How to Present Your Work

Create Case Studies for UI Projects

Going High Fidelity: UI in Mobile Apps

The complete guide: UI in Mobile Apps