Master UI Design : Complete Guide To Creating Great UI

A complete guide to creating User Interfaces that can compete in the crowded app markets. Moves you from beginner to pro
4.0 (10 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
499 students enrolled
Instructed by Sam Bing Design / User Experience
$19
$45
58% off
Take This Course
  • Lectures 45
  • Length 4.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2015 English

Course Description


Join Over 400 students!

Start designing mobile apps immediately. Create your Logo , Icon , UI Interface, basically all you need to create that great looking app!

The course will guide you through designing your first app from the initial idea to actually having a app prototype that you can show around and how to create and design a working website. Zero Photoshop or coding experience needed.

This course is not for people that do not wan't to design apps in the near future.

The lectures are current and will be updated in the future if needed. But it will most help people who wan't a complete guide so they can launch a compelling app in a decently short period of time.

Some of the things that you are going to learn are:

Photoshop Basics

Creating a logo from scratch.

Creating Icons.

Designing UI Elements.

Structuring your app.

Designing your app completely.

Designing a Website for your app with Photoshop.

Turning your Website design into a real Website with Dreamweaver.

Design Tips.

And more content comes continuously!

Try it Risk Free 30 day money back guarantee!

This course you will be going through design fundamentals to creating user interfaces all by yourself. The course is mainly focused on breaking things down so that they are easy to understand and give you the possibility to tailor to your own projects.

Getting the right design takes a lot of time , you might have tons of great app ideas but if you have to hire a designer for all of them you'r energy will deplete since you will be paying for things that don't return your investment.

Equipped with the knowledge you get from this course you will be able to go through different designs without having to give any dollar , this will allow you either to design your UI and UX by yourself , but it could also help you give a clear picture to your designer and be on the same page thus potentially saving you thousands of dollars for each project you create.

If you already using some other software for design that wont be a problem, since you will most likely be able to create the same things with ease.

What are the requirements?

  • Adobe Photoshop , Section 1 will cover photoshop Basics.
  • Any Software that you can use to replace Photoshop.

What am I going to get from this course?

  • Create great User Interfaces
  • Create a Website From Scratch
  • Understand Design Better
  • Understand UX Better
  • Learn Rules That Apply To Any Design

What is the target audience?

  • This course is meant for people interested in design,app developers, web developers,entrepreneurs , who are looking to learn user interface design from the first step to the last.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
02:03

This lecture gives you a quick peek at some of the things we are going to be creating.

01:05

This lecture shows you a simple way to organize your workspace before you start creating projects , so that you always find the right thing without a hassle.

This will help you :

Save Time

Increase Your Creativity

Will look professional if someone else has to access your projects

01:25

This lecture shows you some of the websites we are going to use along this course , these websites can be very helpful to have them in your back pocket.

They will help you :

Find designs quickly.

Find the right color combinations that you are using and get inspired.

Grab icons with ease which you will be using whenever your designing UI.

Section 2: Photoshop Basics
01:10

This lecture you will learn creating new files with Photoshop and how to save a often used preset so that you always have access to it.

02:11

This lecture you will learn creating and working with layers. Layers are the building blocks of any design so understanding layers will move you one step further.

02:45

This lecture shows you some common selection tools used in photoshop . If you want to crop things create new shapes selection tools will always be the way to go .

This will cover :

Using the Quick Selection Tool.

Using the Magic Wand Tool.

Pen tool Selection(Rotoscoping)

02:13

This lecture covers guides and rulers, being precise when designing UI can make a huge difference and guides help you do that , they will help you check your spacing, element placement which is crucial for clean looking UI.

02:20

This lecture covers smart objects, as the name implies they are smart so you don't have to work harder just smarter. Smart Objects will save you tons of time when you have to make a change that will persist along multiple objects.

02:12

Flat colors are now trending but gradients have their own place , especially on web design and backgrounds managing a gradient properly can turn something that looks dull into something more natural.

02:13

Navigating around Photoshop is not an easy task itself , especially when your dealing with tons of elements and you need to move around quickly , shortcuts help you do just that allowing you to focus on your project not on finding things.

Section 3: Design Better
Colors That Convert
Preview
06:20
02:19

A quick look back at the late 90 or the earlier 2000 you will find things cluttered together , hard to read text basically a mess . Giving enough space between your elements will cause your User Interface to look clean and will push you to remove elements that can be removed.

02:03

Design might have no rules but somethings just look better, and lighting your elements from above and darkening the bottom is no exception . This rule can be bent , broken , ignored , but if you are going to use lighting you might as well make it look natural .

02:52

We said that design has no rules , but i always tend to stick to this one using complete black doesn't look natural and there is always a very easy fix , avoid blacks. Avoiding blacks is as easy as pushing your color picker a little bit above or making your color a couple shades lighter this will have a huge impact on your designs.

02:22

Colors are awesome but starting your design with just black and white will allow you to think clearly , where is that element supposed to be , does that space look right etc. You can think of designing on black and white as using the right ingredients first and than thinking about making it look good.

00:50

After you designed and spaced all your elements correctly , its time to add the right colors which is going to be easier since you planned and designed ahead.

04:52

The first thing that makes us click on a App is the icon , using the right icon has a huge impact in the download rates, so picking and designing the right icon is no easy task , but success leaves trails so you can follow proven things that work by looking at the top charts of the app store and matching your icon to fit there. If your icon is right it will give you the chance to impress your users with a awesome app.

03:50

Different screen sizes, big , small , wide are becoming more and more common touch patterns allow you to think where you will place the most important UI elements , have you made something hard to reach , is something thats rarely tapped in a hot spot? People with small hands are starting to have trouble reaching the top of the screens, especially with the texture of the Iphone 6 and 6+ which can easily slip out of your hand . Think how you can make your User Experience better by making things easy accessible.

3 questions

This quiz will help you engrave the information that you just got from the Design better section.

Section 4: First App
06:03

Creating something thats simple and easily remembered is something that all succeeding apps/products have so you want to pay attention to creating the logo since when the logo is completed and looking great moving to the rest of your User Interface will be easier. This will show you that creating a logo doesn't have to be complex and doesn't have to be expensive.

04:25

You have your awesome logo now you want to fit it into an icon , this is exactly what we are going to do and will show you how easy it can be converting your logo to an icon.

18:25

Staying away from login and signup screens can be the best route, you don't want to make the entry barrier to high , people are getting lazier , attention spans are decreasing and everything needs to be simple . But not every app has the luxury of having no login screen , the best option in this case is creating a login screen that will make your users stay.

09:38

The main screen is the place where your users will spend most of their time when they are using you app so you want to make things clean, simple and accessible. This shows you that you don't have to over complicate things to create something that works.

Side Bar
10:24
09:47

If you noticed that all about screen mainly look similar and there is nothing exciting about them , well thats because of the saying "If it ain't broke don't fix it " But every now and then someone goes out and creates the new thing , and that can be you. Create something thats more unique from the other apps.

Button States
04:00
01:28

We all seen mockups they sometimes make us go that isn't real is it ? We are going to use mockups which can help you present an idea to your employee , partner or friends. Mockups provide a easy way to showing your UI without going through the hassle of putting a prototype together.

Section 5: App Two: Canopy
07:27

This lecture we recreate a app called Canopy , we will focus on recreating the app step by step and this will show you how you can recreate your favorite apps by yourself.

10:25

Creating another part of canopy includes , creating a Iphone outline , placing shapes etc.

15:31

We are going to dive in a little bit into details , shapes , placing elements , colors etc.

15:34

We are not used to seeing drop down menus in iOS , but it doesn't mean that we cannot recreate them and make them look good , this is one of the things we are going to be focusing on this lecture.

05:28

We have recreated most parts of the canopy app , now i have a challenge for you to recreate some of the other screens , with the knowledge you packed up until now it shouldn't be hard.

Section 6: Logo Breakdown
07:04

When ideas flow to you grab a pen quick and start sketching , because the next time you might need to create something you might have forgotten them . If you have a idea in your head or the general concept of what your app is going to do , start sketching . This will get you going and you will come up with more ideas details that you can add and much more. Keep a design journal which will be a great asset to you.

05:44

Creating sketches allows you to draw without much consequence , you can scrap designs re create them basically do whatever. When it comes to creating the logo in Photoshop things start getting a bit messier and time consuming , so with a correct sketch this process becomes a breeze.

06:23

If you came all this way and didn't think about colors , now its time to start . Do you want you colors to scream for attention? , do you want them to represent an emotion? Or simply just put a color in there because it looks good , it all takes time and effort to think through , here is a process that might make it easier for you to pick or experiment until you find the right colors for you logo.

05:54

Becoming good at something takes time , but if its worth doing its worth doing poorly many times until you get it right. When it comes to the UI the users are the ones that are the ones that should concern you , so start going through the feedback loop get feedback , improve and repeat. This will lead you to save time and frustration , because you won't spend 2 months creating a logo nobody wants , and after that be burnt out ,lacking the inspiration and motivation to start over.

04:36

We have gotten our logo down , now we need to pick a background for our icon , we need to think in terms of making something that we want to stay in our phone screen , if the app is complete garbage but its icon looks super slick , you might just keep it! And this goes the other way around the icon might cause you to hide an awesome app into a folder.

Section 7: Creating a Website
07:40

You have your app , which your not sure if will get any traction and you don't want to go ahead and spend money into creating a website , here we are going to create the layout of our website in Photoshop , this opens many doors we are not stuck to using Wordpress themes , will all the experience you gathered up to now you can creating anything you want in Photoshop , and yes we are going to turn in into a real website!

04:45

We basically created a image that looks like a website , but websites have different parts, buttons, content . Thats where slicing comes in , we are going to slice our image into smaller parts so it is ready to export .

04:27

We have sliced our web page , now we need to create states for when our mouse rolls over them so they look nice , this literally creates endless possibilities , whatever you can do to an image you can do to your button . So lets create our rollover buttons/images.

10:27

The website is ready now we need to put it together and turn it into a real website. Using dreamweaver we are going to turn our images into a fully functioning website , with zero coding experience .

02:38

Your web page might have allot of pages and here we will learn how you can connect them together. You can also create links that lead to external websites , or to different parts of your webpage.

Section 8: Reserve App
Creating the login
11:34
Sign up and Tips
09:16
Finalizing and Challenge
08:56
Section 9: Extras
Tip: Creating Better Color Palette's
03:02
Section 10: Prototyping

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Sam Bing, Entrepreneur, Artist,Developer

Geared toward getting products off the ground. If you ever tried it's not easy, therefor i focus on what most people have to work with , their skills. Create it your own self , market it yourself , until it takes off. My goal is to give you the complete set of skills/things needed to get either yourself or your product off the ground , with minimal investments. Many things are involved but the right execution mixed with a great design and a way to market the product is the bare basics.

Creating things on the move and an continuous growth of your skills , is not easy but it's also freeing and makes you feel alive. I strive for excellence , therefor anytime anywhere i am looking to learn,grow and give.

Working hard at creating something that didn't exist before , or making something better that leads to helping someone is what gets me most excited. The process of learning and growing is not over until you share the knowledge.

Ready to start learning?
Take This Course