UI design for Developers
-
Upload
andy-gongea -
Category
Design
-
view
388 -
download
0
Transcript of UI design for Developers
![Page 1: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/1.jpg)
UI Design for
DevelopersAn introduction to User Interface Design
![Page 2: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/2.jpg)
What is Design?
Design is the method of putting form and content
together. Design, just as art, has multiple definitions,
there is no single definition. Design can be art. Design
can be aesthetics. Design is so simple, that’s why it is
so complicated. - Paul Rand
![Page 3: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/3.jpg)
To design is:• to simplify
• to assemble
• to order
• to clarify
• to amuse
• to add value
• to illuminate
![Page 4: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/4.jpg)
Meet the team
![Page 5: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/5.jpg)
Paul RandART DIRECTOR
![Page 6: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/6.jpg)
Max MiedingerTYPEFACE DESIGNER (HELVETICA)
![Page 7: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/7.jpg)
Dieter RamsINDUSTRIAL DESIGNER
![Page 8: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/8.jpg)
Kenichiro AshidaGAME CONSOLE DESIGNER
![Page 9: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/9.jpg)
Karl ElesnerENTREPRENEUR
![Page 10: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/10.jpg)
Timeless Designs
![Page 11: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/11.jpg)
Barcelona Chair - 1929
![Page 12: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/12.jpg)
London Underground Map - 1933
![Page 13: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/13.jpg)
Volkswagen Beetle - Ferdinand Porche
![Page 14: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/14.jpg)
Apple iPad - 2010 - Jonathan Ive
![Page 15: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/15.jpg)
What is UI Design
UI Design is the visual representation of a set of
requirements, needs or ideas serving one or multiple
goals.
![Page 16: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/16.jpg)
Design Principles• Design for Emotions
• Strive for Consistency
• Offer Informative Feedback
• Prevent Errors and Help Recovery
• Recognition rather than Recall
• User Control & Freedom
• Match between system & real world
![Page 17: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/17.jpg)
Design Elements
• Colors
• Typography
• Icons
• Charts and Graphs
• Photography and Movies
• Content
![Page 18: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/18.jpg)
![Page 19: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/19.jpg)
Stop!
Hammer Time!
![Page 20: UI design for Developers](https://reader033.fdocuments.net/reader033/viewer/2022051320/588aa3871a28ab4c308b4de1/html5/thumbnails/20.jpg)
That’s a wrap!