Learn this unique method that shows you understand the design decisions behind your projects and know how to guide the user to the desired action.

Hierarchy Strips

We will be using the Red Square Method to learn alignment by hand - it’s really important to train your eye first before you jump into auto-layouting tools.

Red Square Method

How many fonts to pick? How to choose the right colors? How to space it all out? All of these questions and more are answered within the course with direct examples.

Fonts, colors, spacings

I’ll show you which grid works the best for most UI design and why. Then we’ll apply that grid to all of our elements for maximum design consistency and an easy way to expand it.

It all starts with a grid

We’ll explore the basics of Components (Figma) and Symbols (Sketch), how to annotate a design for developers and for your portfolio, beautiful presentation and more!

And more

Learn the UI design fundamentals by creating a consistent, beautiful design component library of your own.

Boring UI Course

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

Why it’s good that most of UI design is boring.

1. Introduction

Introduction

It all starts with setting up the colors, grid and picking fonts.

2. Grid, Colors, Type

Grid, Colors, Type

All you need to know about making buttons and more.

3. All you need to know about making buttons and more.

Buttons

Build inputs, dropdowns, multi-select boxes, calendars…

4. Textfields

Textfields

Radios, Checkboxes, Sliders, Toggles, Tags and more.

5. Small stuff

Small stuff

Lists are a very popular design pattern. Let’s explore them!

6. List items

List items

Greatly reusable components for multiple purposes.

7. Cards

Cards

Universal mobile navigation patterns starting point.

8. Tabs and Navs

Tabs and Navs

Showcase a service or a product in a reusable way.

9. Detail Pages

Detail Pages

Learn how to define hierarchy
in early stages of design.

10. Hierarchy

Hierarchy

Show your design library and components in a beautiful way.

11. Present like a pro!

Present like a pro!

The complete basics of using Components in Figma.

Components - Figma

The complete basics of using Symbols in Sketch.

Symbols - Sketch

How to design with this unique annotation method.

We always start our landing page designs with text framing. It’s a mix of low and high-fidelity wireframing that allows for much better content creation processes.

TextFraming

The best alignment technique for mobile 
projects now come to the web with some 
tweaks to work with the larger canvas and 
around the visual decoration.

Red Square Method, but bigger

Learn the basics of graphic design and 
decoration positioning to WOW your users and create a lasting impression. That includes multiple options for each section!

Key visuals

Learn how to structure the layout, font sizes 
and grids for the much larger canvas. How to 
use whitespace to your advantage, so the 
project never looks boring or empty.

Layout, grid and more

I will share with you my entire high-fidelity 
lp design workflow, based on landing pages 
viewed by millions of users and created for 
both startups and Fortune 100 companies.

My Landing workflow

Learn how to design versatile and functional Landing Pages for products from scratch

Web Design Course 2 - Landing Pages

Web Design Course 2 - Landing Pages | Hype4Academy

What is the course about, how we approach landing page designs and what you need to be aware of before you start.

Intro

Never start your designs with the visuals. They need to start with a plan and that plan is best to be done outside of your design tools - without distractions.

Writing

Textframe is a mix of a low-fidelity wireframe and a high-fidelity typography and layout. It allows for a much better understanding on how to structure the text further, write better copy and expand the message.

Textframe

Header is the most important part of the landing page because it’s the first thing people see. It needs to be both engaging visually, and carry a message that makes your users interested to learn more.

Header

Learn how to create multiple variations of the header and how you can get inspired by other websites and incorporate that inspirations into your own work.

Header - versions

After a visually heavy and engaging part, let’s give our users a breather and create a more minimal, easier to focus section talking about the product with included social proof. Of course in a couple potential versions!

About us / social proof

Features are the main focus of any landing page. They must convey the message in a way that’s informative, engaging and makes the users interested in finding out more.

Features

Learn how you can show the most important sections in multiple ways, including showcasing real-world products alongside software.

Features - versions

Two sections that require completely different approaches. Pricing has to be clear, readable and primarily functional, while in testimonials it’s good to focus on the human touch. Let’s explore how to do these right.

Pricing & Testimonials

A couple of ways to create smaller CTA sections and a clear, readable and functional footer with tips on how to use the knowledge from the course to experiment further on your own.

CTA’s & Footer

Learn how to structure the layout, font sizes and grids for the much larger canvas. How to use whitespace to your advantage, so the project never looks boring or empty.

Larger canvas

The best alignment technique for mobile projects now comes to the web with some tweaks to work with the larger canvas. Optical alignment is great for portfolio shots.

Photos and icons are an important part of UI design. Learn our secret techniques on how to make them all fit together, look beautiful and consistent. Photo editing is key!

Prepare the visuals

The web is not just lists! Learn how to combine the content with map views, engaging forms, grid based product views, filtering, sorting and visual data presentation.

Maps, Forms, Grids

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

My workflow

Learn how to create web apps from scratch. Dashboards, charts, data tables, map views and more!

Web Design Course 1 - SaaS Product

Why knowing web design is essential to stand out!

It all starts with careful planning of what we want to design

Planning

How the Req Square Method helps you align on the web.

Work with external images so they always fit your design.

Prep-work

How to structure and plan web app navigation.

Navigation

Design beautiful AND functional dashboards.

Dashboard

How to show rows and columns in a readable way.

Data tables

Combine a list view with a map view and filtering.

Map + List views

Beautiful grids on the web can make use of all the extra space.

Grid view / Edit view

Learn to create less condensed more visual lists.

Second list view, Edit

Create a login screen without worrying about too much space.

Login

Web Design Course

Getting clients is the most essential skill a freelancer needs to have in order to survive. Based on our years in both regular freelancing and gig economy I share the best practices.

Getting clients

Is this too high? Is this too low? Learn the best practices of finding a rate that’s just right. It will help you both be happy with what you earn and not discourage clients.

Setting your rates

Freelancing often means being a solo entrepreneur. There are some legal things you need to take care of to avoid having trouble with the tax office.

Legal side of things

Should you do design? Design and coding? 
Find what your offer should be about to maximise your results, get happy clients and grow your business.

Fine-tuning your offer

Showing great previous work is crucial to getting new clients interested in what you do. Learn our best practices, tips, tricks and more to make your portfolio shine.

Your portfolio

Learn how to price your work, get clients 
and improve your chances.

How to master freelancing

I've been doing freelance for about 15 years, and transformed my solo career into a successful agency (hype4.com). I went from working on super low-budget projects for small clients, all the way to Fortune-100 companies 

How to Master Freelancing - Become Your Own Boss!

All you need to know about freelancing explained in 8 points that we will dive into in more detail in next segments.

Overview

How to get more clients while freelancing solo, including the gig economy, being proactive and a lot more.

Get more clients

Master freelancing

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

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

Where to host your portfolio, should you send it in a PDF, tips, tricks and mistakes to avoid.

Portfolio best practices

Learn the hierarchy strips method to annotate your designs like a pro

See your case study in a new light with more modern contrasts, fidelity boosts and ways to modify the existing elements.

Contrast and fidelity boost

Learn how to properly annotate your case studies with elements like color definitions, typography scales, and component definitions. Then explore how you can use hierarchy strips and a multi-step process to outline specific UI components in a design driven fashion that will surely turn some heads!

UI Case study tips and annotations

The most important part of any case study is about making it into a story that is engaging enough for people to follow. In this chapter I will show you how you can do it easily.

Video courses

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

Boring UI Course

Web Design Course 2 - Landing Pages

Web Design Course 1 - SaaS Product

How to master freelancing

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

UI In Mobile Apps: Both Courses

Ultimate Design Portfolio Bundle