Haayany's

*This is based on the US version, 04/04/2022. It's been slightly over 3 weeks since I changed my phone to iPhone from Samsung galaxy. While I was figuring out and getting used to the new interfaces and interactions, the Starbucks app was extremely easy to use and consistent in interactions and designs. I was wondering why. One thing I noticed is that the action card is getting along with the hom..

Typeface: the design of a collection of characters Font: Single instance or embodiment of a specific weight, width, or style of a typeface Typography... Major component of branding, Readability is important, Accessibility(not just using colors or icons, using actual text is important for better accessibility) WCAG guideline about typography contrasts Type of content Minimum ratio (AA rating) Enh..

Navigation Systems - Primary Navigation, Secondary Navigation, Utility Navigation, Related Content, Inline Links, Index, Search. Primary Navigation - Primary sections of the site, Secondary Navigation - Sub-sections inside of the primary navigation pages Utility Navigation - Important parts of the site that are not part of the content hierarchy Help, Shopping Cart, Sign In, Profile Page, Social ..

www.lukew.com/ff/entry.asp?1946 LukeW Ideation + Design | Digital Product Strategy & Design www.lukew.com

How many choices are there? The average short-term memory can hold 7±2 items Limit navigation choices to 5-9 items at a time(if you can't categorizing them is a good idea) What are the choices called? Create clear & unambiguous labels Use language of the target audience Uniqueness vs Clarity e.g. Shopping cart: Cart, Bag, Bin, Basket, Bucket, Box, Wallet About Us: About, About Our Company, Us, T..

Showcase Websites Awwwards: The awards of design, creativity and innovation on the internet Site Inspire: A showcase of the finest web and interactive design One Page Love: The ultimate showcase of One Page websites The Webby Awards: Honoring the best of the internet HTTPster: An inspiration resource showcasing totally rocking websites made by people from all over the world Interesting People Ch..

UI and UX are different. UI: Navigation, menu, drop-down, button, link, window, input box, ... UX: People, happiness, solving problems, efficiency, ... User centric design is understanding human. when design a website... 1. Strategy Determine who the website's users are. What Objective the client wants to accomplish. 2. Outline of scope List of content and functionality that needs to be incllude..

Sitemap Content map User flowchart Non-visual paper prototype Wireframes in-between phase between a sitemap and a prototype. i.e. Decide what the user does when, Hierarchy of activities User experience flow and logic What goes where Functional, Minimal, Consistent, User-centric Not about: Formal detail, wireframe, program Don't get caught up in details in your wireframe, don't be too fussy or ob..

1. Visibility of system status Let users know what's going on. i.e. the app is working! 2. Match between system and the real world Use words and form the user already understands i.e. don't make the user learn a whole new "language" 3. User control and freedom We all make mistakes. Give the user undos and redos 4. Consistency and standards Use repetition, consistency, similarity to help foster s..

UI Overview Content Context Audience Look and Feel Language Functionality UI Elements Color/Shape/Pattern Imagery Typography Icons/Buttons Navigation: Menus/Links/Fields Hierarchy of Content Client Goal Hierarchy of Function User Goal 1. What's the user's first impression? 2. What's the first thing the user does? 3. What does the user do next?

https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/ How To Design Better Buttons — Smashing Magazine Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create. In today’s article, we’ll be covering the essential items you need to know in order to create ef www.sma..

Functional interface(Speed) PROS Simple / Direct Unambiguous Rapidly adoptable Familiar/predictable Logical CONS BORING Stylistic interface(Style) PROS Entertaining Engaging Rewarding Experience Brandable Novel/Individual CONS Obstructs Content Time-consuming Frustrating Experience Dates Rapidly Unnecessary How to create a pattern library and why you should bother - https://boagworld.com/design/..

Type language made physical fast to read accurate/clear meaning economical can represent what cannot be depicted The accurate representation of complex non-visual concepts Ex> democracy connotation + individuality = branding Icon 1. Trying to be recognizable Ex> app icons in app markets 2. DIfference between Icon and Symbol Icon - Pictoral, they look like what they are representing Symbol - non-..

Real-world knowledge It is based on analog models. Ex> We know how digital buttons work on a screen because we've experienced analog buttons in the real world Learned behavior Something that doesn't exist in the real world, but you've seen and used so you know how it supposed to work. Ex>Swiping, drag, pinch to zoom Cause and effect When a user presses a button and something happens, the user qu..

Denotative images: literal. very first feeling about the art itself. apple with gray color: unhealthy, rotten / apple that has very bright color: healthy, good Connotative images: metaphorical. the art's metaphorical image. falling apple: Newton, Gravity / apple with a snake: good and of evil from the bible When you make a denotative image, you have to think about; 1. What is the essence of the ..