Things to Use For Design:

Skeuomorphic Design:
1. Adobe Photoshop (This is for UI, logos, and icons)
2. GFX pack (This is for UI, logos, and icons)
3. CC pack (This is for UI, logos, and icons)
Flat Design:
1. Adobe XD (This is for UI)
2. Sketch (This is for UI)
3. Illustrator (This is for logos and icons)
4. Adobe Photoshop (This is for icons)

Color Theory Notes:

Color Moods:
Red: Love, Energy, Intensity, Heat, Danger, Importance, Passion, and Failure (Love Example: A model trying to sell you a red bra | Energy Example: Somebody in a red tracksuit running | Intensity Example: A red car to promote a fast car | Heat Example: The red hot water indicator | Danger Example: The circle single cross sign which is used in no smoking signs and other signs | Importance Example: A warning on if you are sure you want to delete something | Passion Example: The phrase “I put my blood and sweat in this” because that shows dedication which shows passion and blood is red | Failure Example: A red X).

Orange: Confidence, Energy, Optimism, Health, and Cheapness (Confidence Example: It stands out like somebody with confidence. | Energy Example: Somebody painting something the color orange very fast | Optimism Example: It’s bright like somebody optimistic | Health Example: A orange Vitamin C packet | Cheapness Example: A search button on a flight site that’s giving a discount)

Yellow: Joy, Intellect, Attention, Happiness, and Anxiety (Joy Example: A laughing emoji | Intellect Example: Somebody writing an essay with a number two pencil | Attention Example: The hazard symbol | Happiness Example: A smile emoji | Anxiety: A anxiety emoji)

Green: Freshness, Safety, Growth, Nature, Success, and Health (Freshness Example: A green apple hanging from a tree | Safety Example: A green exit sign | Growth Example: American dollar bills piling up | Nature Example: A forest | Success Example: A green checkmark | Health Example: Green foods are looked at as healthy and people say things such as “You need to eat your greens they’re good for you!” so green relates to health)

Blue: Stability, Trust, Serenity, and Cold (Stability Example: The big blue balls you use as a seat | Trust Example: Somebody wearing a blue suit to a job interview | Serenity Example: A river that is flowing | Cold Example: The blue cold water indicator)

Purple: Royalty, Wealth, and Femininity (Royalty Example: A crown with purple fabric behind the gold | Wealth Example: A commercial for a loan company | Femininity Example: A commercial for tampons)

Color Palette Patterns (Using a color wheel would be helpful):
Analogous Color Palette: Get a color from the color wheel and then use a color right next to it on the color wheel with that color. (Analogous color palettes are harmonious and easy to look at for long periods of time. This is something that should be used for app background screens or the main interface of your app.)

Complementary Color Palette: Get a color from the color wheel and then use the color directly across from it on the color wheel with that color. (Complementary Color Palettes use clashing colors which will stand out and grab somebody’s attention. This is something that could be used for logo design or an attention grabbing screenshot. They aren’t good for your main interface because you don’t want to be staring at clashing colors all the time.)

Split Colors Color Palette: Get a color from the color wheel and then use the analogous colors of the color directly across from the color you picked (Use the colors that are to the left and right of the color that’s directly across from the color you picked). (Split Colors Color Palettes use clashing colors that are more mild than the complementary color palette. This will still grab attention but would be easier to look at. This should be used for a logo.)

Triadic Color Palette: On the color wheel draw an equal lateral triangle (You can use arrows instead of an actual triangle that would be easier. You can also either literally draw it or just imagine it. Since a color wheel consists of 12 main colors another way of getting your colors is diving 12 by 3 which is 4. When you pick a color on the wheel count 4 to left of it and 4 to the right of it and you got your 3 colors) and where the corners of the triangle hit are the colors that would be used. (Triadic Color Palettes are very well balanced and still attention grabbing. They should be avoided though because they were constantly used back in the 1990’s so your Triadic designs would come off as old school which doesn’t appeal to many people now.)

Monochromatic Color Palette: Get a color on the color wheel and combine it with various amounts of white to make it brighter or various amounts of black to make it darker (You can still use the original color you picked but you still have to combine it with various amounts of white and/or black or else it wouldn’t be monochromatic. so monochromatic color palettes create different tones and shades of the same color which is helpful when it comes to providing the amount of contrast that you need). (Monochromatic Color Palettes are contemporary and are used often in modern digital design)

Typography:

Font Families:

Serif Families Overview: The Serif font has tiny little feet sticking out in certain places to give the letters more detail. (Usually used for more professional things)

Serif Families:

Old Style Serif Typeface: This is the oldest form of Serif which is how text use to look like in the 1400’s. (Adobe Jenson is Old Style)

Transitional Serif Typeface: This is a slightly more modern Serif family than Old Style. (Times New Roman is Transitional)

Modern Serif Typeface: This is a modern Serif family. (Didot is Modern)

Slab-Serif Typeface: All the letters are just as thin/thick. (American Typewriter is Slab-Serif)

How to tell which is which: Look at the thinnest and thickest part of a letter. The thinner the thinner parts are than the thicker parts the newer it is (This excludes Slab-Serif).

Sans-Serif Families:

Grotesque Typeface: Grotesque is the oldest San-Serif. (News Gothic is Grotesque)

Neo-Grotesque Typeface: A more modern Grotesque typeface. (Helvetica is Neo-Grotesque)

Humanist Typeface: A modern San-Serif family. (Gill Sans is Humanist)

Geometric Typeface: A very even (All parts letters in this font family are just as thick) San-Serif family. (Futura is San-Serif)

How to tell which is which: The older families are more evened out on the letters when the newer ones are less evened out.

Rules of Fonts:

1. Serif’s and Sans-Serifs work really well together. (For example: A header that’s a Serif typeface and a body that’s a Sans-Serif typeface works out really well and it also looks good if you have a San-Serif heading and a Serif typeface. Never mix a Serif with a Serif or a Sans-Serif with a San-Serif because it’ll look bland and undifferentiated)
2. Don’t use too many fonts. If you’re using 3 or more fonts evaluate and think if you really need that many fonts. Using two different fonts is best.
3. Each typeface has personality and a mood. Using the wrong font for a certain mood can look out of place.
4. Avoid mixing different moods.
5. Avoid mixing type faces from different eras.
6. Go for similar moods.
7. Keep the mood and time era similar.
8. Mix the Serif-ness (Serifs and Sans-Serifs) and Weights (Light, Heavy, Thin, Thick, Bold, etc).
9. Use around 45 to 75 characters per line in a paragraph. 66 is best.
10. Avoid hyphenation
11. Flush to the left
12. Don’t indent
13. Use bold to emphasize text not capital letters
14. Don’t letter space lowercase
15. Letter space capital letters. 10% is good.
16. Don’t use all caps in text blocks longer than one line
17. If you don’t have any small caps fonts don’t use the font.
18. Don’t alter the width of letters
19. Say numbers in their letter form for everything that isn’t mathematical

Fonts to Avoid:

1. Kristen
2. Comic Sans
3. Papyrus
4. Viner
5. Curlz
6. Eyuboy

Typography Tools:
1. WhatFont (If you see an unknown font you can use WhatFont to identify it and get some information on the font. It’s a chrome and Firefox extension.)
2. https://www.fontsquirrel.com (It has a lot of free fonts that can be used for commercial use)
3. https://skyfonts.com (This is a Mac app that allows you to integrate a font you found in any application in two taps)

UI Design Notes:
Our brain looks at bigger text then smaller that’s how our brains are programmed to work.
Instead of just having a block of text on your website you customize it more, spread it out, add pictures, etc. The user should first be drawn to the title, then to the subtitle, then some images, and then a little bit of body text.
Light comes from above. Don’t make light come from below, it looks freaky!
When making a button you need something that can indicate it can be pushed. A straight shadow that’s a darker shade of the button’s color on that’s located on the bottom of the button will indicate this. When the button gets pushed the shadow should go and the whole button should be the shade of that shadow. Then when the button is released it should go back to a button with a shadow.
Function always comes before form.
If a button is just text something you can do to make it look more clickable is putting a round boarder around it (or a rectangle with rounded edges) because round things are usually buttons which tend to be clicked on.
Inside that button you can add gradients and shadows to make it look for clickable (The boarder should be the end of the gradient. It can be different but it wouldn’t look as good). This makes the button look a little more round and a little more 3D.

You can also have a button with a drop shadow, a gradient, rounded edges, and something you could do which isn’t required is a little image in the button referencing the button’s function (If you put an image in the button having a rounded image would look best).

Avoid using the flat design because just because it’s minimalistic doesn’t mean it’s good. Since it’s flat it has no depth certain things as simple as buttons don’t even look like buttons. Sometimes the user may try to click something and ends up seeing it isn’t even clickable. It’s basic, has many flaws, it’s harder for the user to follow, and it’s ugly. Avoid the flat design and if you use the flat design at least use Modern Skeuomorphism instead by mixing flat textures with some shadows. Give it depth! Like for example when unlocking your iPhone where it says Enter Passcode, Emergency, and Cancel. They all look exactly the same how would somebody know that you can click on the cancel button or the emergency button? What if there was a real emergency and they didn’t know that button was clickable due to that stupid design flaw? Design is meant to give the user conscious and subconscious clues on how you should be able to interact with that specific object and this flat minimalistic look does the exact opposite and flat isn’t new or trendy at all. Flat was used in the days of 8-bit games and MDOS so do you really want to take a step back in progression design wise or do you want to advance it? If you’re going to ignore this and use flat anyways just don’t, at least use Modern Skeuomorphism which mixes the flat design with shadows and gives it some depth. That way the user can at least know the difference between something as basic as a button or a label. Don’t sacrifice function for form.

Align your text properly. For example, if you have a blog and there’s a top bar with options and a title over it, aline the title with the top bar or align the top bar with the title. You don’t want things out of alignment or else it’ll change the flow of your website.

There are many fundamental types of alignment. One is called Edge Alignment where you have all the elements on one side lining up with a single line. Another is called Center Alignment which is when you line up all the elements by their midpoint. When it comes to user interface design you’re going to want to use Edge Alignment. This isn’t limited to just digital design though. Like for example if you are making a business card you can use Edge Alignment to make your business card look more organized and professional (A right alignment for a business card is recommended).

Start out simple with your design so you can focus on things like the alignment and the layout. Like start out with something black and white (You can also add some grey to it or just use grey no black and white at all. Another way of saying something that’s black and white is monochrome) and add on to it. You want to do this that way things look good the way they are without being distracted by colors and other things. So start with black and white and when the layout and alignment is all done start adding things like color to it. Don’t start with complexity and tone it down. Start with simplicity and build onto it.

When using text on images sometimes it could hard to see the text. Especially on moving images. There are multiple solutions to this. One of the solutions is a square/rectangle like background that has a high opacity. Not so high you can’t see what’s behind it but not so low it’s hard to read the text. This box around your text can be any color or shade you want it to be. If you don’t want to use that you can this solution is good if the image isn’t a moving or changing image (It could work if it’s a changing image but it’s better to just have an opacity block instead). You could change the text color and the image background to make it stand out. If you do the opacity method an opacity of 20 with the color black could work out really well. You could also do a blurred overlay and put text there to display text on your image. Do the blur strategically though. Like for example if the text will always be at the bottom of the image, make it around 20% opaque around the bottom so you can still see the image and so the text is still sharply being displayed.

A UI Designers goal is to catch the users attention and to make them click certain things depending on what the program is. They’re attention grabbers. Things you could do to bring attention to certain things are
1. Making text bigger or smaller
2. Making text bolder or brighter in color or make it more muted
3. You could use a typeface with a heavy or thin weighting
4. You could capitalize or lowercase some letters or words (Usually making text bolder works out better than capitalizing it)
5. Making something italic
6. Increasing or decreasing the distance between each of the letters to make the overall size of the word take up more space

If you wanted to have a title for example stand out a bold font that’s blocky with a huge text size could do that perfectly.

The footer is not about attention grabbing. They’re like settle whispers. This doesn’t even just apply to the footer. For example if you have a title for a site that’s all bold, blocky, and a big text size you could do something like make a certain word slightly smaller, not bold, and italics to stand out. That would stand out more and look better than making it bigger and/or more bold than the rest of the title.

User Experience (UX) Notes:

Class UX story: New built college and somebody asked where to put the footpaths and somebody said to connect the buildings and to put it around it but instead the architect just put down lawns and then came back years later and where you could see where all the students walked is there the path went. UX is all around us.

You don’t need to put a Terms and Conditions section in your app because when the user downloads your app they have to follow the terms and conditions anyways. If you do choose to put it in your app don’t have it a huge pop-up the first time a user opens your app. That’s terrible UX because it’s invasive and it’s unnecessary.

By normal logic if you do a favor for somebody they will usually feel like they owe you and will have to return that favor in the future. In reality though it’s really the opposite. Let’s say you try to befriend somebody who is a higher rank than you in your company. Let’s say he has a huge library of books this person enjoys reading and you ask him for a certain book to read for a week, then you’d give it back. Now the person would be less likely to say so because it’s rude so he will probably agree. So let’s say you took that book and put it somewhere safe for a week and didn’t touch it at all so it would be in perfect condition when you give it back. When you return the book that person will be happy. Now that you got this person to do you a small favor it would be easier to work your way up to asking for a bigger favor. This is because people need to feel consistent. That’s how it works because your brain needs an explanation. So the person probably though you asked for the book because you liked it. This makes it easier to ask for bigger favors because it builds a bridge over that gap of yes or no which would higher your chances of getting a yes. Asking for favors like this could make yourself more likable. UX design is like this because it’s tied to phycology.

There are two different types of UX patterns. Light patterns and Dark patterns. Light patterns can be like a bar indicating the strength of your password so you know if anything in your password should get changed. Dark patterns is something that only benefits you the creators and not the user like selling something online but having the price tag far away from the title and picture of what you’re selling.

If you need the user to give you permission to something like their GPS location you need to do it step by step. Just like the person with the books did favor by favor. Think of your app as a stranger and the user as somebody who is talking to the stranger. They don’t know much about this app so they need to build trust. A great way of doing this is for example if you have a maps app you could have a pop-up explaining that their GPS location is needed to locate where the person is on the map in order to give the person directs to a certain place and then have a button saying Ok, after the user clicks the Ok button it would show the pop-up asking for permission (Like after they click Ok to your explanation the default iOS pop-up comes up asking you if you want to enable that feature for this app to use or keep it disabled).

Lets say you have an app and you aren’t getting any growth or growth is slowing down or this growth is really slow. Something you could do to improve your app and increase growth is simply asking your user what features they mainly use in this app and then improving your app based off of that feedback. You need to know who your users are and what they want to achieve using your app. The best way to do this is by profiling your users. Out of all of your friends who is this app perfect for? Is it perfect for somebody smart and safe? Dumb and reckless? Somebody who uses the software on their phone casually? Somebody or uses your app for business? Or somebody who is a power user on your app. What I mean by this is this:

Casual User: Uses most phone features, Uses phone to make, use contacts to send texts and take pictures, and always has their mobile device on them.

Business User: Somebody who wants a simple phone but functions as an integrated device, wants to easily read emails and call back to sender, and needs popular mail server integration.

Power User: Will use almost all built-in mobile functionality, Will extend phone functionality with additional software, and will look through and change every menu option.

What user does your app mostly appeal to? Change it according to that. If you try to appeal your app to everybody you’ll be nothing. If you try to make it stand out by appealing to a certain crowd you’ll be something.

Are you putting something in your app because it’s cleaver or because it’s good? (Bad UX is called anti-pattern) An app by NBC had the idea of making their menu in the shape of their logo which made it hard to read the text. They did it though because it was cleaver and not good which was a major flaw in their UX.

Another app named USA TODAY has a normal side menu that comes out when you click the 3 little lines that are horizontal and in the shape of a hamburger. This is better UX because you can have as many menu options as you want and all the text is straight so it’s easy to read. To avoid what NBC did always get a second opinion when you come up with an idea for your app.

Is your website or app consistent? For example if you’re a hair styling company and want a website for your hair styling company and you use a picture on the homepage for your website make the picture related to your company itself not an event or company does just the company itself. People want to see what your company is about which is why they go to your website. They don’t want to see a picture of a company vacation for example. They want to see something related to hair not something related to the beach or sand or vacation.

Another example is if you work for a tech company and somebody is reporting a problem to the IT department the website page for error reports is a bunch of check boxes with Add to Car under it and a checkout button which makes no sense for a error reporting website page.

Can you make it simpler? You usually can. You don’t want an application with 3 menu-bars on the top and a bunch of options on the sidebar because thats too confusing and complicated. If you can make it simpler then make it simpler. Think of it like this: Is your website grandma proof? Never make it simpler if it sacrifices functionality though. Functionality then form.

Are you making life difficult for your users? Think of your users like a computer because like a computer they have a limited amount of memory and a good UX uses that memory well meaning they use less of the users memory. For example if somebody goes to sign up for a website and they see 8 password rules that are hard to follow and make your password hard to remember which makes it difficult for your users.

The app equivalent is a super long app tutorial when you launch the app for the first time. Most users would just click past it all until they could use the app and just completely ignore the tutorial. A better solution is to just give the user little bits of information when it’s needed. So for example if you open a to-do list app for the first time and don’t know how to use the app something you could have a little tag under the + button for adding tasks labeled “Add Task” instead of having an entire tutorial on how to use the app. So just give like pointers as the user uses a certain feature in the app for the first time.

Another way to use too much memory from a user which you want to avoid is having an ATM pin pad with the name ERROR for clearing what you wrote instead of just CLEAR. It’s pointless and less straight forward.

Another example is that everybody is use to pull and release to fresh a page. That’s become a pattern that everybody is familiar with but this one remind app called Seed chose to use pull and release to add reminders which uses too much of the users memory.

Can you teach without teaching? What I mean by this is can you make an app so simple the user already knows what they should do and how things works just buy seeing it themselves and you can. Just don’t use any anti-patterns and keep things as simple as possible without sacrificing function for form. One way of teaching your user how to use your app without teaching is lets say somebody just opened your app and you can scroll down on your app but the user isn’t doing that. You could make the button of the image peak up and peak back down to indicate there’s more down there which would get the user to scroll down. Nobody wants to be talked to to learn something so try teaching without teaching.

Are you treating your users like a dumbass? Like for example when you add something to your cart on amazon it tells you that the item you just added was added to your cart and asks you if you want to continue shopping or go to your cart. This is an anti-pattern because it’s treating your user like they’re stupid and because if they want to go to the cart they’d click the cart button and if they’re trying to add around 10 items to their cart and constantly get that pop-up it gets annoying and it makes them reevaluate their decision which makes them feel like an idiot. Don’t use “Idiot Boxes” (Conformation boxes) it’s a bad idea and if you do only use it for extreme cases like if somebody clicks “Delete Account“ or “Transfer Ownership” since those are major changes. Adding something to your shopping list isn’t though and doesn’t need a conformation box. Now if you were to add to cart and you want to indicate to your user that they added something in their cart in a non annoying way you could make an animation of the item going into the cart getting a notification badge indicating something new has been added to their cart. This is much better since it tells the user what you were trying to tell them in a non intrusive and creative way. Try to do these things in a non forceful way to your users if possible.

What are the differences between designing for iOS and designing for Android?

iOS:
1. iOS uses the Flat design.
2. It’s normal to divide different screens with tab bars (They’re like segmented controls but with custom textures and are made to do things such as change through views. Keep the tab bar options at a maximum of 5 or it users will be more prone to clicking on the wrong option by mistake)
3. The back button is usually just < just like the forward button is usually > on iOS which is a software button which is specific to that certain app (So it’s like navigating up the hierarchy. For example lets say you go from a page to another page which branches off to another and you go to that branched off page. When you click back it will go to the original page not the page that branches off).
4. iOS can use the 3 horizontal lines that are under each other which make the hamburger shape. When clicked on it brings the navigation options out from the side but usually tend to use the tab bar instead.
5. Titles in apps are usually aligned to the center.
6. iOS doesn’t have the dropdown menu where when you tap on something you get a dropdown of more options (iOS uses the sliding wheel instead).
7. iOS icons are line like (Imagine the outline of a star that isn’t filled in. That’s what that means).

Android:
1. Android uses the Material design.
2. It’s not normal to divide different screens with tab bars (They’re like segmented controls but with custom textures. If a tab bar is used in android it’s usually at the top of the screen and can be navigated by swiping that certain direction to go to the new tab or by simply clicking on it) because there are usually already 3 touchscreen hardware buttons at the bottom of the screen which would make the design look bad because you’d have over one row of buttons which you don’t want at all.
3. On android the back button is a turned arrow pointing back which is a hardware button which isn’t app specific meaning you can click it to go back to the previous screen to the point where it takes you outside of the app (It’s like the back button in the browser of your website it just takes you back to the previous location like going back in your search history).
4. Instead of the tab bar android uses the 3 horizontal lines that are under each other which make the hamburger shape. When clicked on it brings the navigation options out from the side. This is used instead of the tab bar on android because the home button and the back and forward button are hardware buttons that look like a row so having another row over that looks bad so a solution to that is the hamburger method for navigation.
5. Titles in apps are usually aligned to the left.
6. Android does have the dropdown menu where when you tap on something you get a dropdown of more options.
7. Android icons are blocky (Imagine a star that’s filled in and not just an outline. That’s what that means).

Why not just use the same design for both platforms?

You could use the same design for both platforms but it isn’t recommended. Both operating systems are built around different designs systems and having your app match those design systems is going to appeal to the people on those platforms more when is your job as a designer.

What are the differences between Flat and Material design?

Flat:
1. Flat design is meant to be flat (like a pancake) so it has very little (if any) shadowing.

Material:
1. Material design is meant to look like a piece of paper lying on a piece of card and so it has some more shadows so it looks a little 3D.

What is the difference in the visual hierarchy between iOS and Android?

iOS (It’s the font weights in the letters that makes the difference. A font weight is the thickness of the letters. In some cases you may change the text size but it’s unlikely):
1. The title would be bold.
2. The subtitle would be regular.
3. The subtext would be thin or light.

Android (It’s the text size that makes the difference. In some cases you may change the text weight but it’s unlikely):
1. The title will always be bigger than everything else.
2. The subtitle will be slightly smaller than the title.
3. The subtext will be smaller than the title and subtitle.

If you’re going to design for a certain operating system make sure you have a physical device running that operating system. It makes it easier to get in that design mindset and makes it easier for you to understand things like navigation.

Design Guidelines:

iOS (Flat): https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

Android (Material): https://material.io/design/

Good Sources for Pattern Examples:

https://www.mobile-patterns.com

https://pttrns.com

When picking a color pallet write the hex codes of the colors down somewhere digitally so you don’t lose them.

A user flow diagram is how you design a users journey in your app. It’s like a website site map for where your designs go. The user flow diagram is made up of: Rectangles to represent screens (The home screen, login screen, settings screen etc), Diamonds to represent decisions (Tapping the login button, tapping to compose a tweet, tapping to discard changes, etc), and you use arrows to link up screens and decisions.

Using those things is how you create a user flow diagram. For example the feed of twitter would be a square named feed the compose button would be a diamond named compose and the arrow would connect them. Always make a flow chart when you get an idea for an app so you can plan things out well.

After the flow chart is done make a sketch of each item on the flowchart so you can see how the app would look. If the idea seems like a good app idea then make the designs. If it doesn’t look like a good app idea then don’t.

You can use an app called pop to prototype your sketches by just importing the pictures of them from your camera roll or by just taking a picture of it from the app. Then after multiple pages are made you can link pages up together in certain spots to emulate buttons or make a swipe up or down to emulate that.

You can use Grafio 3 to make your flow diagrams and make the sketches and prototype to test run in Pop. You can sketch and take a picture and import that picture in sketch.

Websites to Use:
https://colorhunt.co/ (A good place to find color palettes)
https://flatuicolors.com/ (A color palette that was formulated to work well with the iOS platform)
https://materialpalette.com/ (A color palette that was formulated to work well with the iOS platform)
http://colorzilla.com/ (A FireFox and Chrome extension. If you were to find a color you liked on a site you could use this extension to get the hex code of that exact shade)
https://jgthms.com/web-design-in-4-minutes/ (On how to design and create a website from scratch)
https://dribbble.com/colors/ee6d66 (This is where designers showcase their work in their portfolios and it’s also a great place where you can find design talent for your own projects or get inspiration on how you can approach your next design project, you can also search by colors using hex codes to see how people use a specific color)
http://platowebdesign.com/articles/translating-client-speak-infographic/ (This will help you understand what your client wants)