Sayed-Minhal-Principles of Beautiful Design
Download as PPTX, PDF0 likes297 views
1. Good design is about effective communication through functionality, usability, accessibility and brand alignment. 2. Every web page has basic elements like a container, identity/logo, navigation, content and whitespace that follow design principles. 3. User experience design must consider the context of different devices, screens, users, and data to create intuitive, focused interfaces that minimize cognitive load through hierarchy, simplicity and perceptual grouping principles.
Sayed-Minhal-Principles of Beautiful Design
- 1. Established rules and conventions By Sayed Minhal – Front End Designer & UI Developer
- 2. What is meant by “Good Design”? Is it good look and feel, aesthetic and visual appeal? Is it good functionality? Is it usability aspect? Is it accessibility of information? Defining Good Design
- 3. Designing is Communicating It is stuff that works and presents information well, but looks ugly or fails to fit with the client’s brand V/S beautiful stuff that is hard to use or inaccessible Designing is…
- 5. Every web page has a container. This could be in the form of the page’s body tag, an all-containing div tag. Without some sort of container, we’d have no place to put the contents of our page. Containing block
- 6. When designers refer to an identity, they’re referring to the logo and colors that exist across a company’s various forms of marketing, such as business cards, letterhead, brochures, and so on. The identity block increases brand recognition while informing users that the pages they’re viewing are part of a single site. Logo
- 7. It’s essential that the site’s navigation system is easy to find and use At the very least, all main navigation items should appear “above the fold.” Users can move about easily via intuitive navigation A navigation structure that not only changes appearance when hovered over with the cursor, but also indicates the active page or section helps users to recognize where they are, and how to get where they want to go. Navigation
- 8. Content is King…. A typical website visitor will enter and leave a website in a matter of seconds. If visitors are unable to find what they’re looking for, they’ll undoubtedly close the browser or move on to another site. Footer contains Copyright information and mark the end of webpage. Content / Footer
- 9. The graphic design term whitespace (or negative space) literally refers to any area of a page without type or illustrations. Without carefully planned whitespace, a design will feel closed in, like a crowded room. Whitespace helps a design to breathe by guiding the user’s eye around a page, but also helps to create balance and unity Whitespace
- 10. Dutch painter Piet Mondrian as the father of graphic design for his sophisticated use of grids. By using the Grid system we can line up elements and also can maintain the proportions. Greek mathematician Pythagoras observed a mathematical pattern that occurred in nature and referred to this pattern as the golden ratio or golden ratio or divine proportion A line can be bisected using the golden ratio by dividing its length by 1.62. This magical 1.62 number is really 1.6180339 …, Grid Theory
- 11. A simplified version of the golden ratio is the rule of thirds. A line bisected by the golden ratio is divided into two sections, one of which is approximately twice the size of the other. Dividing a composition into thirds is an easy way to apply divine proportion without your calculator The Rule of Thirds
- 12.
- 13. The Device The Screen The User The Data The Context
- 14. Developers can take advantage of native functionality across devices. Different screen resolutions, web interface, or Mobile interface like Android, BlackBerry, WP7, or iOS device. The Device
- 15. Web/Android/iOS/BB The Android user base has grown to be a strong competitor in the mobile market, for the flexibility of Android design. Android convention is to place view- control tabs across the top, and not the bottom, of the screen. Parallax scrolling is common in Android applications Apple can reject an application from the official App Store because of design problems. iPhone users generally hold from the bottom of the device, so main navigation items should be in reach of user thumbs. Support standard iOS gestures, such as swiping down. BlackBerry includes native support of corporate emails; and runs on many devices with hard keypads, which is favored by users with accessibility issues as well as late adopters to touch- screen interfaces. Use BlackBerry UI components, not the tabs or other components. Press the track pad: Default option, like revealing the menu
- 16. The Real Estate Know the context of use Who are the users? What do they need? Why would they come? How will they use? When they will use it? Where will they access and use information? The Constraints Display a telescoped view of almost limitless information Cognitive load increases while attention is diverted by the needs to navigate Cognitive load is the mental effort to comprehend and use an application
- 17. Limit the features available on each screen, and use small, targeted design features. Content on the screen can have a secondary use within an application, but the application designer should be able to explain why that feature is taking up screen space. Banners, graphics, and bars should all have a purpose. The Solution: 1 - Embrace Minimalism
- 18. Help users fight cognitive distractions with a clear information hierarchy. Draw attention to the most important content with visual emphasis. Users will be drawn to larger items, more intense colors, or elements that are called out with bullets or arrows; people tend to scan more quickly through lighter color contrast, less-intense shades, smaller items, and text-heavy paragraphs. The Solution: 2 - Use Visual Hierarchy
- 19. A smaller file size is a good indicator of how fast an application will load. Focused content means users won’t leave because it takes too long for the overwhelming amount of images per screen to load And users won’t be frustrated with the number of links that must be cycled through to complete a task The Solution: 3 - Stay Focused
- 20. While standing in line at the bank or a restaurant, people pull out their mobile devices to check in, entertain, and consume another dose of content According to German psychologists Gestalt: The Gestalt Principles refer to theories of visual perception developed in 1920s which states: Every cognitive stimulus is perceived by users in its simplest form. Key principles include proximity, closure, continuity, figure and ground, and similarity. Understanding Users
- 21. Proximity Users tend to group objects together. Elements placed near each other are perceived in groups; Many smaller parts can form a unified whole. Icons that accomplish similar tasks may be categorically organized with proximity. Place descriptive text next to graphics so that the user can understand the relationship between these graphical and textual objects.
- 22. Closure If enough of a shape is available, the missing pieces are completed by the human mind. In perceiving the unenclosed spaces, users complete a pattern by filling in missing information Harness the closure concept to create icons with a strong primary silhouette, without overloading users on pixelated and overdone details
- 23. Continuity The user’s eye will follow a continuously- perceived object. When continuity occurs, users are compelled to follow one object to another because their focus will travel in the direction they are already looking The user perceive the horizontal stroke as distinct from the curled stroke, even though these separate elements overlap.
- 24. Figure and Ground A figure, such as a letter on a page, is surrounded by white space, or the ground. Primary controls and main application content should maintain a distinct separation between figure and ground.
- 25. Similarity Similar elements are grouped in a semi- automated manner, according to the strong visual perception of color, form, size, and other attributes (see Figure 4-5). In perceiving similarity, dissimilar objects become emphasized Strict visual grids confuse users by linking unrelated items within the viewport. The layout should encourage the proper grouping of objects and ideas.