iOS 12 & Swift 5 – App Design, UI/UX plus Development

In this lecture, we will be discussing how to install Sketch.

Let's create our very first app icon with Sketch! In this lecture we will create a settings icon.

For our second icon, we will learn how to create the home icon which is usually found in the tab bar area of most iOS apps.

When we combine shapes together to create icons we still have access to the individual shapes. In this lecture, we will learn how to reduce those shapes into a single path.

We will now create an add icon which lets users know they can add something to the user interface.

Making our icons pixel perfect will be important if we want to be sure they don't appear poor quality when we export them into our apps. In this lecture, we will learn how to do that.

We continue practising how to create icons by learning how to create a profile icon.

In this lecture we will create a friends icon and also learn a few more tricks in Sketch such as converting to outlines.

In this lecture we practise making our final icon. By now, you should have the confidence to combine shapes together to make app icons. This will be a primary skill before you use the vector tool to create more sophisticated app icons.

Our icons are cluttered! In this lecture, we will put everything in order.

This challenge concludes everything we have learnt about creating app assets and icons.

Despite often being referred to together, UI and UX are actually distinct processes that contribute to app design. In this lecture, we will attempt to understand what both mean.

Design methods have evolved over time to favour more minimalistic user interfaces. This lecture is dedicated to examining this trend and exploring some of the tried and tested concepts we can use in our own apps.

We will be exploring Apple's iOS Design Theme which should be the guiding principle behind our app design.

In this lecture, we will get to know about the colour wheel which is a visual tool that helps in finding the right colours for your app.

Let us finally use the color wheel to find an appropriate color rule to use in our app.

Typography is how you use words to convey meaning. We will be looking at the strategies you can use to effectively use type in your app.

We examine the theory behind wireframes answering questions such as, "What are wireframes?", "Why are they important to app design?" and "How are they developed?".

We look at the app concept and strategise how we will build our wireframe. Our focus in this and the next few lectures is to create the wireframe for a Bitcoin app.

We create the tab bar of our wireframe and also get to practice using Sketch's templates.

We will now create symbols for our wireframe's tab bar to make it easy to reflect changes across our art boards.

We turn our attention to the home screen of our wireframe.

We will now create the transfers screen. We are aiming to create a screen that shows a history the friends we have paid and a list of the friends we currently have.

This is our final wireframe. Here we will create a screen that displays news on Bitcoin.

In this lecture we discuss what low and high fidelity wireframes are. The principles we learn here also apply to mockups.

We add more fidelity to our wireframe by adding tab bar icons.

We finally move on to create our first mockup building on what we have learnt from wireframes. This is part 1 of our home screen mockup.

We complete our home screen mockup.

This challenge concludes everything we have learnt about user experience principles.