Design Processes and Resources for Successful Web Applications

Slide 1

Slide 1 text

Design Processes and Resources for Successful Web Applications Kamila Gareeva Isabel Pantoja Muñoz Lab2023 Information Technologies Corp.

Slide 2

Slide 2 text

Why is UI design the shortest way for success in web applications?

Slide 3

Slide 3 text

A User Interface is basically what allows a person to use an artifact without being familiarized with its technical operation. UI

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

What is “User Centered Design” and what are its principles?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Design Concept

Slide 12

Slide 12 text

What is a Design Concept? And why is it important? Concept: The idea behind your design

Slide 13

Slide 13 text

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?

Slide 14

Slide 14 text

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/

Slide 15

Slide 15 text

Visual Design

Slide 16

Slide 16 text

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?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Balance

Slide 19

Slide 19 text

Proportion

Slide 20

Slide 20 text

Emphasis

Slide 21

Slide 21 text

Hierarchy

Slide 22

Slide 22 text

Unity

Slide 23

Slide 23 text

Contrast

Slide 24

Slide 24 text

Diagramming

Slide 25

Slide 25 text

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?

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Style Guide

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

Components of the Style Guide. The foundational elements of design are: - typography - colors - icons - images - graphic elements

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Colors - Color models - Color wheel - Types of color scheme - Color temperature https://color.adobe.com monochromatic color scheme complementary color scheme triple color scheme

Slide 32

Slide 32 text

Icons Icons visually break up the content and make it less intimidating. http://glyphicons.com/ http://www.flaticon.com/

Slide 33

Slide 33 text

Images http://deathtothestockphoto.com/ http://www.imcreator.com/free http://snapwiresnaps.tumblr.com/

Slide 34

Slide 34 text

Graphic elements - line - shape - color - space - texture - typography http://deathtothestockphoto.com/ http://www.imcreator.com/free http://snapwiresnaps.tumblr.com/

Slide 35

Slide 35 text

Teşekkür Ederiz LAB2023 INFORMATION TECHNOLOGIES