App Design:
WE’ve poured into this amazing up it only takes three taps for a user to completely wipe it from their device and that’s usually due to user experience problems.But the most important thing that actually makes people fall in love with your app is the design.
How easy is it to use. How beautiful is the interface.
Designer Vs non-designer thinking:
Color Theory:
Red: So red cells to people on this idea of intensity of love of excitement.
Yellow: yellow tends to be used for things that try to convey you guys remember this advert made the news in the UK certainly about this protein shake company.
Now of course there’s a loJoy happiness intellect and it’s also an incredibly attention grabbing column which is perhaps why if you guys remember this advert made the news in the UK certainly about this protein shake company.This particular shade of yellow
is probably a bit too intense.
Green: And then we’ve got various shades of green which tend to convey ideas of freshness safety growth.So you see a lot of food related services using this in that branding.For example Amazon Fresh what else conveys freshness more than this grassy green color palette.
So choosing a color palette is not just about you know advertising and attention grabbing.It’s also about selling your product and appealing to certain instincts or desires that people have.
Blue: Blue which has traditionally always been about stability trust serenity.And you know in fact when you think about anything that’s related to medical or medicine or health it tends to be using a blue color palette.It From a design class.
But the next time that you go to a job interview if you wanted to instantly come across as more trustworthy the tip from the designers is to wear a blue shirt without speaking the color already speaks for you and conveys this idea of stability and trust.
Purple: Purple which is meant to evoke ideas of royalty wealth femininity.So this is pretty much the color of choice for a lot of payday loan companies and especially those are targeting women for some reason.
Analogous Colors: A color wheel.different ways that you can go about doing this to make your designs convey different messages.So let’s look at some of the ways in which we can use the science of color theory to combine different colors for your designs.
So for example if I wanted to pick an orange color to have in my design how would I combine it with a different color to complete my design.Well one of the simplest color palettes is going for what’s called an analogous color or an adjacent color.This is where when you take one color on the color wheel and combine it with the color that’s immediately next to it or Jason to it and you get an analogous color palette.Now analogus color palettes create designs that are incredibly harmonious and easy to look at.So this is something to think about when you’re designing app background screens or the main interface of our app.
Complementary colors: So the opposite of analogous colors is when you take one color on the color wheel and match it with it with the color that’s directly opposite to it.And this is called complementary colors.Now complementary color palettes produce extremely classy designs that stand out that grab your attention and can be good for logo design or attention grabbing screen shots but they don’t make very good color palettes for your main interface.
We don’t want to be staring at clashing colors all the time.colors all the time.So how can you tone down the flashiness of complementary colors.Well you can take one color on the color wheel for example red.And instead of going for its direct opposite in which case it would be green here.You can split that color into its analogous colors namely a sort of limy yellow and a light blue.
Now by having a three color palette like this you end up with designs that are still attention grabbing but are less classy and easier to look at.And I’m a huge fan of using split colors for app icon design because you’re going to keep it very simple and it’s going to be mostly shapes and colors and split colors allow that app icon to stand out in the app store without being incredibly flashy.Now by having a three color palette like this you end up with designs that are still attention grabbing but are less classy and easier to look at.And I’m a huge fan of using split colors for app icon design because you’re going to keep it very simple and it’s going to be mostly shapes and colors and split colors allow that app icon to stand out in the app store without being incredibly flashy.
Monochromatic colors: Now what’s very modern at the moment and very in vogue is the idea of monochromatic colors.So taking the same color and combining it with either various amounts of white or various amounts of black to create different tones and shades that stand out from each other.Now of course you can mix in as much wider as much black as you like in order to provide as much contrast
as you need.
Tools for Designing with Color Resources
iOS Design — https://flatuicolors.com/
Android Design — https://www.materialpalette.com/
Chrome extension — https://www.colorzilla.com/
What is the main thing that my user want to achieve with this app.If the main task is just finding the
bathroom then you should make the process of completing an action as friction free in a few steps as possible.
and then afterwards you can think about asking them incremently about more things.
Need to understand the core functionality of the app and then minimize the steps to achieve within your app.
User experience design is closely tight to human psyocology.
Light Pattern :
You can use to nudge users towards a certain direction and they are usually beneficial both for the user and for
yourself.
Dark Pattern
And then there’s dark patterns which is where you use design to trick people into performing certain actions that are
only beneficial to you and are bad for them.
Need to know who your users are and what to achieve with your app.Best way to do this is my profiling our users.
So you have to know who your users are and what they want to achieve using your app and the best way to do this is by profiling your users.
So the easiest way to go about this is a thinking exercise.So keep your app in mind and then think about out of all of your friends.
Who is this app perfect for for David who’s really geeky still painting Warhammer on the weekends.Or is it for Jane who’s
you know really into her photography and she’s like really artsy always takes pictures of latte’s.
So think about this person and build a personality into your app by tailoring and around your user profilesso you can go
as crazy emerged as you want.But the important thing is to be granular.Don’t just say you know I’m building an app for
men between the age of 20 and 40 that’s too broad.That’s like everybody think about making one particular person fall in
love with your app and you’ll get pretty far.
So the main point is think about what is the core functionality of your app and profile your users to continually
re-evaluate that question.Am I making it as easy as possible for my users to achieve a core task within my shop.
2. Am I doing It Just Because It’s Clever?
Always get a second opinion
3.Am i been consistent
It means that when you’re designing for a web site when you’re designing for an app think about a mindbeing consistent
with my product in terms of my design is my design consistent with my brand on my website and my apps consistent with
each other.So this is a classic example of a inconsistent design.
Now another example of an anti-pattern is the ever reporting tool that we had at a previous workplace when you had an I.T. problem at this workplace and they had a Web site that looks like it was inherited from e-commerce Web site because you had to pick your I.T. problem and then you have to add it to cart and then you would have to check out your problem and then it would say something like congratulations
your order has been made.
understand what your product does understand.
What is your branding What is it that your company is all about and try to make your designs on your apple on your Web site consistent with that.
4.Can I make it simpler?
Yes.Always always try to make things simpler.you have to identify the core objective of the users for using your app and then try to minimize the number of steps that it takes to achieve that.It cut down three or four taps to essentially zero because everything is loaded up automatically.So Simplicity is key. You can always make things simpler. Scrap everything until you’re left with the very basic and then add features and add things onto it as and when users demand it because you can always keep things simpler.
5.Am i making difficult for my users? anti-pattern
We’re trying to make the interface as clear and as least confusing as possible for our users.
you’ll notice that when the password rules get too complicated and you overload a user’s brain making them think that this is way too much effort.You’ll see that you’ll sign up strop off.
And so there is a happy medium between keeping that password secure and encouraging your users to sign on.
Give tips and hints that are contextual.You have to solidify that knowledge by carrying out a task.And this is how you want to teach users to use your app.Don’t overload their brain with loads of information at the beginning.
So tread gently on your uses brain try to minimize the effort that they need to put in in order to learn how to use your app.
And humans generally don’t like being confused.They’ll associate negative feelings with your app and so try and avoid confusing users.
6.Can i teach without teaching?
7.Am i Treating my users like a dumbass?
when I pressed that button.I don’t know why I feel like an idiot having to having to confirm my action given that it wasn’t like
A person enters a highly productive mental state by working in harmony with her tools.Interrupting a user’s flow for no good reason is stopping the proceedings with idiocy.I just entered the nuclear codes or something.
Designing for iOS and Android
Now these two buttons even though they both essentially navigate back.They actually work quite differently because on Android the naff back button is a time based navigation.So it will take you to the previous screen that you saw just like when you’re on a Web site when you click the back button.It’ll take you to the previous web page on Android.The NAF back button takes you to the previous screen historically in time but on iOS the neph back button is not navigating back in time but it’s actually navigating up the hierarchy.
So the equivalent would be say if you went from the home page to a particular page then from that page you navigated to another page on the same hierarchy.When you click the back button when you’re on this page instead taking you back over here the back button.AOS would take you up hierarchically i.e. it would take you back to the parent screen or the homescreen in this case.
lines make it look like a hamburger.Now you may or may not disagree.But essentially one of the most common ways that you’ll see navigation occurring in Android apps is through these hamburger menus.And when you tap on them a menu slides out and you can pick and choose which screens you want to go to.
And on iOS.Traditionally it’s been done using a tablet controller which resides at the bottom and it can only contain a maximum of five items because otherwise it would be hard for the thumb to actually navigate it.
Title Placement:
The next difference that we’re going to talk about is title placement on Android.The title is always left aligned so it will extend towards the right.But on iOS The title is always centered so it’s always small details like this that users pick up on and can make them feel like this is an app that was really carefully thought out and made in such a way that takes into consideration of their platform you know or it could feel like it was cobbled together and then there’s also things which are only on Android which you don’t actually have an equivalent on
iOS.
WorkOut App:
1.Choose Workouts
2.Track Workouts
3.Guided Workouts
How to create User Flow Diagram
Let’s just map this very basic user flow of going into Twitter.Composing a new tweet and either deciding to discard or sending it out into the world.
Map out a user flow diagram for a single user journey to avoid complexity.
Design a Receipe app
- Browse Recipes
- Save/Favourite Receipes
