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

Features - versions

Pricing and social proof

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.

Red Square Method

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

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

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

Portfolio best practices

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.

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

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.

Video courses

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

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