Design Processes and Resources for Successful Web Applications

Transcript

1. Design Processes and Resources for Successful Web Applications Kamila Gareeva Isabel Pantoja Muñoz Lab2023 Information Technologies Corp.
2. Why is UI design the shortest way for success in web applications?
3. A User Interface is basically what allows a person to use an artifact without being familiarized with its technical operation. UI
4. Our users are basically persons, humans that commit mistakes, have emotions, desires, personality and many other well known factors. Our success in web and mobile applications is directly proportional on: • How they feel in our digital environments • How much they like • How our products solve their needs Who is our User?
5. User Experience Design is a compendium of techniques, principles and studies about the interaction between users and digital environments. Successful products will depend on how people feel and use our platforms. UX
7. What is “User Centered Design” and what are its principles?
8. User experience has one particular goal: focus on the needs of the person that will use our product. UX design means to drive the user through the experience of a tool, allow them to feel free to use it and explore all the features. Usability
9. is a design methodology that helps us to create more functional, intuitive and emotional products. Also it transforms our data into ideas that can connect with the people. Human Centered Design Desirability What do people desire? Feasibility What is technically feasible? Viability What can be viable?
10. Visual Design Process is composed basically for the following steps: Design process and methodology 1 2 3 4 5 6 7 8 Brief Design concept Brainstorming Sketch Prototype Design Evaluate Improve
11. Design Concept
12. What is a Design Concept? And why is it important? Concept: The idea behind your design
13. Design concept: the solution to an unsolved problem. Design Concept is also related with the field of Design Strategy and Research, Finding a design concept is the result of an analytical process of rhetorical factors like: Who is our main audience? How is our cultural context? What is our main purpose with a design? Which is the message we want to give?
14. How to think a concept for designing? (inspire) http://getbootstrap.com/ http://expo.getbootstrap.com/ http://flatdesign.io/ http://designmodo.github.io/Flat-UI/ http://onepagelove.com/
15. Visual Design
16. Visual design or visual communication is the understanding and praxis of the visual language, a system composed by graphic elements for create speeches. What is Visual Design?
17. Visual Design is an extensive and large field, but lets make a review of the main principles that should be applied for Interfaces Design. http://vimeo.com/32944253 Applying Visual Design principles to web design
18. Balance
19. Proportion
20. Emphasis
21. Hierarchy
22. Unity
23. Contrast
24. Diagramming
25. Diagramming is basically the main composition structure, is necessary for a design that contains data and information. A diagramming system for graphics and data is composed by columns and rows with margins that define the breathing areas in the workspace. Why is diagramming important?
26. Grid System is the diagraming guide used for web design, this helps for organize the elements in a web site, is fundamental to apply a responsive design or a mobile interface design. http://getbootstrap.com/css/#grid Grid Systems and How to use it
27. Style Guide
28. What is a Style Guide and how it works? Style Guide is a visual guide with all the elements you will use for a specific design project.
29. Components of the Style Guide. The foundational elements of design are: - typography - colors - icons - images - graphic elements
30. Typography Typography is the use of text in design. - elements of typography - types of typography - basic styles of typography http://fortawesome.github.io/Font-Awesome/ http://theneodesign.com/flat-design-free-fonts/ https://www.google.com/fonts
31. Colors - Color models - Color wheel - Types of color scheme - Color temperature https://color.adobe.com monochromatic color scheme complementary color scheme triple color scheme
32. Icons Icons visually break up the content and make it less intimidating. http://glyphicons.com/ http://www.flaticon.com/
33. Images http://deathtothestockphoto.com/ http://www.imcreator.com/free http://snapwiresnaps.tumblr.com/
34. Graphic elements - line - shape - color - space - texture - typography http://deathtothestockphoto.com/ http://www.imcreator.com/free http://snapwiresnaps.tumblr.com/
35. Teşekkür Ederiz LAB2023 INFORMATION TECHNOLOGIES