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
Tweet

More Decks by Clara Isabel PANTOJA

Other Decks in Design

Transcript

  1. Design Processes and Resources for Successful Web Applications Kamila Gareeva

    Isabel Pantoja Muñoz Lab2023 Information Technologies Corp.
  2. A User Interface is basically what allows a person to

    use an artifact without being familiarized with its technical operation. UI
  3. 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?
  4. 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
  5. 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
  6. 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?
  7. 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
  8. What is a Design Concept? And why is it important?

    Concept: The idea behind your design
  9. 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?
  10. 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/
  11. 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?
  12. 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
  13. 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?
  14. 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
  15. 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.
  16. Components of the Style Guide. The foundational elements of design

    are: - typography - colors - icons - images - graphic elements
  17. 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
  18. Colors - Color models - Color wheel - Types of

    color scheme - Color temperature https://color.adobe.com monochromatic color scheme complementary color scheme triple color scheme
  19. Icons Icons visually break up the content and make it

    less intimidating. http://glyphicons.com/ http://www.flaticon.com/
  20. Graphic elements - line - shape - color - space

    - texture - typography http://deathtothestockphoto.com/ http://www.imcreator.com/free http://snapwiresnaps.tumblr.com/