Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Processes and Resources for Successful Web Applications

Design Processes and Resources for Successful Web Applications

How to apply design principles for web resources.


Clara Isabel PANTOJA

December 06, 2014


  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
  6. None
  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/