Understand breakpoints and plan the layout not just to fit within it, but to make sense and create a full, ready to use and beautiful looking experience.

Breakpoint thinking

The best alignment technique now comes to the web with some tweaks to work with both  larger and smaller canvas and around the visual decoration.

Red Square Method

Learn when to modify the design, remove sections or merge them in creative ways. Work with data tables based on what they’re used for, so they’re fully usable.

Small screen experience

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

Layout, grid and more

I show you my workflow, including some unique design patterns that come from 20 years of commercial experience. Responsive design is all about having the right plan!

My workflow

Master designing for tv’s, computers, phones, 
tablets and everything in between.

Responsive Web

1. Introduction

Introduction

All the possible ways to create responsive navigation that makes sense for the project

2. Responsive Navigation

Responsive navigation

How to plan and execute a complex responsive dashboard that makes sense for the user.


3. Responsive Dashboards

Responsive Dashboards

Plan responsive data tables from complex to super simple in a way that fits the product context.

4. Responsive Data Tables

Responsive Data Tables

How to handle forms, large scale map views and displaying visually engaging cells.

5. Forms, Map Views, Cells

Forms, map views and cell views

Make a complex landing page responsive by identifying what should be responsive in the first place.

6. Complexity in Landing Pages

Landing page headers, complex sections

A mobile experience doesn't mean everything has to transfer from desktop the same way. Learn how to approach it.

7. Mobile Experience context

Contextual edits for mobile

How to use AI right now, what NOT to use it for and how to navigate the potential issues that may come from the technology. Learn how to critically approach AI content.

AI in design

An outline of skills that will likely NOT be replaced by AI anytime soon and are worth focusing on right now. Ranging from presenting your work to communication.

Skills to focus on

Because we are both working for clients AND building an AI startup, we crafted a couple of unique methods on how to work with external AI tools well. You’ll learn them here.

Unique methods

Learn this unique method that shows you understand the design decisions behind your projects AND how to annotate AI generated content in your design work.

Hierarchy Strips + Annotation

This is a hybrid course with a goal to update every time something relevant to UI or UX design gets released in the AI space. It’s only the beginning phase of our exploration.

Updates

Course

Learn what AI is, how to use it well, what definitely NOT to use it for, and what skills to focus on learning to get ready for the future of design.

Design + AI - Get Ready for the Future

Let’s first explore what AI is, where it came from and how it connects with our specific UX design industry.


1. Introduction to AI

Introduction to AI

At this point knowing what NOT to use AI for is actually more important than the opposite. Learn usecases in which AI tools currently do more harm than good

2. How NOT to use AI

How NOT to use AI

I believe the most important skill to learn right now regarding AI is annotating those rare use-cases in a way that makes it clear to everyone to check the AI content for legal or consistency issues.

3. How to USE AI + Annotate it right

How to USE AI + Annotate it right

AI is just a tool, but the skills you have next to it can help you use that tool to its full potential and thrive in the industry.

4. Skills to focus on

Communication will be one of the most important skills of the future. Learn to express your thoughts and ideas well!

5. Communication

Communication

Designers should also understand the business and economic side of work they do and of the world they live in.

6. Business side and economics

Business side and economics

Contrary to popular belief, UI won’t be the first skill to be replaced by AI (it’ll likely be big parts of research instead). Learn UI right now to be ready for AI UI generators.

7. Learning UI

Learning UI

Annotation is a great way to present your work to stakeholders or even your portfolio viewers. When AI will manage to eventually do some of the UI work, it will be essential to present it well to everyone. This is key!

8. Annotating Design

Annotating Design

Communicating with developers and ensuring the highest quality frontend execution of your design is a great way to be an important part of any business.

9. Working with developers

Working with developers

It’s not the end of the course - we’re just wrapping up the intro here. From now on I’ll be constantly researching new ways to use AI in UX design that make sense and update the PDF ebook with that information. It’s only the beginning!

10. Summary

Summary

Testing the current state of AI generated UI designs with Midjourney V4.

Midjourney for app design

Trying to use Chat-GPT for generating colors, and midjourney for images for a mobile app design. Learn why these tools are not yet ready.

Using Chat GPT and Midjourney for design

Learn even more about the hierarchy strips method and improve your presentations.

Hierarchy Strips

Why Microsoft Designer is not a real AI based design tool you should think about.

Testing Microsoft Designer

This can actually be useful… for Graphics designers. 
It is not useful in its current state though.

Adobe Firefly

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.

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.

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.

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.

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.

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.

Video courses

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

Responsive Web

Design + AI - Get Ready for the Future

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