The design process is less about having a muse and more about gathering information, planning, and executing. Design is the connection between the audience and all of the people who work hard to provide products and services. In this session, we’re going to demystify the web-based design process for non-designers and learn how to communicate with one another to move ideas forward, cover some basic principles, understand language used to talk about design, harness the power of limitations, and the art of good collaboration. The goal of the session is for participants to be able to leave the session with a better understanding of what designers and designs need and how to communicate, support, and collaborate with creative individuals. Session Outline and Notes: http://www.slideshare.net/MichaelTribone/demystifying-web-based-design-session-outline

1. Design the Future
Demystifying Web-based
Design for Non-designers and
the Art of Good Collaboration
Web Conference @ Penn State!
Monday, June 22, 2015!
1:30 p.m. to 2:15 p.m.!
Deans 2

2. Michael A. Tribone
UI/UX Developer
Penn State
mtribone@psu.edu!
https://twitter.com/mtribone!
http://www.mtribone.com/

3. Roadmap
Design from my point-of-view!
! Muse > Surface > Communication > Limitations!
Process!
! Intro > Definition > Research > Concept > !
! Design > Implementation > Evaluation!
Communication and Collaboration!
! Yes > Listening > Your Words > Show Me!
! Sketching > Providing Feedback

4. Design from my point-of-view

5. Design doesn't require a muse

6. Design isn't surface

7. Design is communication

8. Design is the glue

9. The power of limitations

10. Roadmap
Design from my point-of-view!
! Muse > Surface > Communication > Limitations!
Process *!
! Intro > Definition > Research > Concept > !
! Design > Implementation > Evaluation!
Communication and Collaboration!
! Yes > Listening > Your Words > Show Me!
! Sketching > Providing Feedback

11. Process: A la carte tornado

12. Not a magic bullet

13. Do it again, again, again

14. Problem Definition

15. What kind of problem?

16. What are the goals?

17. Think, write, reflect

18. Identify possible solutions

19. Research

20. Got information?

21. Go talk to people!

22. Concept

23. Visual Hierarchy

25. Size

26. Layout

27. Spacing

28. Color

29. Sketch

32. Wireframes

35. Design

36. Style boards

38. Mockups

40. Implementation

41. HTML/CSS

42. Templates

44. Frameworks

46. Javacsript

47. Accessibility

48. Responsive

51. Break Points

52. There isn't a fold

53. Evaluation

54. Accessibility

55. Usability

56. Responsive

57. Break Points

58. Go talk to people!

59. Got information?

60. Do it again, again, again

61. Roadmap
Design from my point-of-view!
! Muse > Surface > Communication > Limitations!
Process!
! Intro > Definition > Research > Concept > !
! Design > Implementation > Evaluation!
Communication and Collaboration *!
! Yes > Listening > Your Words > Show Me!
! Sketching > Providing Feedback

62. Communication and Collaboration

63. Yes and...

64. Listening

65. Use your words

66. Provide examples

67. Sketch

68. Giving Feedback

69. Michael A. Tribone
UI/UX Developer
Penn State
mtribone@psu.edu!
https://twitter.com/mtribone!
http://www.mtribone.com/

70. Roadmap
Design from my point-of-view!
! Muse > Surface > Communication > Limitations!
Process!
! Intro > Definition > Research > Concept > !
! Design > Implementation > Evaluation!
Communication and Collaboration!
! Yes > Listening > Your Words > Show Me!
! Sketching > Providing Feedback