Pushing Pixels to Cranking Code

The web browser as a design medium is truly coming into its own. For years we web designers have created our designs in fixed widths, much like our paper-bound cousins. Wonderful methods like the 960 grid system have helped us refine our designs and communicate with developers. The rampant use of mobile devices, especially amongst our primary audience, no longer allows us a common window width to have as our standard. Our medium is now an unpredictable behemoth with screen sizes ranging from phones to HDTVs and beyond. Designers must begin modifying their work methods and incorporating newer tools into the design process.

At Notre Dame, Photoshop has increasingly become a single tool, as opposed to the primary, in the process of creating a web design. For years our team has had a silo approach of design and development: a designer is entrenched in Photoshop creating a web design, then the PSD is given to a developer to cut into a website. However, as we have furthered our reach into Responsive Web Design the line between designer and developer is blurring. It is the designer who needs to take on the most and encroach into what is perceived as the developer's territory.

Transcript

1. PUSHING PIXELS TO CRANKING CODE Designing responsively from mobile to HD
2. HIGH ED RESPONSIVE WEB CONFERENCE
3. WE GET IT RESPONSIVE IS IMPORTANT
4. 404 SLIDES NOT FOUND
5. MAKING A CASE FOR RESPONSIVE IS IRRELEVANT
6. THE AFTEREFFECTS OF RESPONSIVE
7. RESPONSIVE IS NOT A FEATURE
8. RESPONSIVE IS A METHOD
9. RESPONSIVE IS DISRUPTIVE
10. PHILIP ZASTROW @zastrow #aim10
11. RESPONSIVE IS A PARADIGM SHIFT
12. RESPONSIVE CHANGES OUR APPROACH
13. RESPONSIVE CHANGES PLANNING
14. RESPONSIVE CHANGES PROBLEM SOLVING
15. RESPONSIVE CHANGES THE DESIGN PROCESS
16. RESPONSIVE CHANGES THE DESIGNER
17. CHANGE ISN’T BAD
18. RESPONSIVE IS A MATURING LEAP IN THE WEB INDUSTRY
19. RESPONSIVE FOCUSES DESIGNERS’ ATTENTION
20. DESIGN CONTENT INSTEAD OF PLACES FOR CONTENT TO LIVE
21. A TYPICAL PROCESS
22. PLANNING DESIGN DEVELOPMENT
23. THE SILO APPROACH
24. WE NEED A BETTER PROCESS
25. RESPONSIVE AT NOTRE DAME
26. DEVELOPERS WERE MAKING DESIGN DECISIONS
27. CLIENTS WITH A PSD IS A HEADACHE
28. “IT DOESN’T LOOK LIKE THE DESIGN”
29. CONCEPTS CAN’T BE FIXED WIDTHS
30. LAYOUT IS A DESIGN DECISION
31. TYPOGRAPHY IS A DESIGN DECISION
32. RESPONSIVE REQUIRES REDEFINING DESIGNER
33. DEFINING WEB DESIGNER
34. OUR MEDIUM IS THE BROWSER
35. RELATIVE UNITS OF MEASURE
36. px
37. px ×
38. %
39. em
40. CSS IS THE TRUE WEB DESIGNER TOOL
41. Think Print
42. SPECIAL TOOLS FOR PARTICULAR USES
43. CSS = InDesign
44. CSS IS FOR LAYOUT
45. CSS IS FOR TYPOGRAPHY
46. PHOTOSHOP IS NOT A LAYOUT TOOL
47. PHOTOSHOP IS FOR PHOTO EDITING
48. PHOTOSHOP IS FOR GRAPHICS CREATION
49. A RESPONSIVE PROCESS
50. PLANNING DESIGN DEVELOPMENT
51. PLANNING DEVELOPMENT DESIGN
52. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation
53. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation
54. CONTENT PROTOTYPE BEN CALLAHAN @bencallahan http://bit.ly/LJHVfv
55. hierarchal
56. hierarchal content first
57. A RWD PROCESS FIRST REQUIRES CONTENT
58. hierarchal content first educates client
59. hierarchal content first educates clients user centric
60. hierarchal content first educates clients user centric small screen up
62. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation
63. STYLE TILE SAMANTHA WARREN @samanthatoy http://styletil.es
64. PSD
66. STYLE PROTOTYPE JEREMY LOYD @jeremyloyd http://bit.ly/Tb7HPr
67. HTML+CSS
68. THIS PUTS THE STYLES IN THE CLIENT’S CONTEXT
69. Demo
70. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation
71. DEVELOPERS GET TO FOCUS ON CODE
72. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation
73. RESPONSIVE LAYOUT
74. DESIGNERS LAYOUT FOR INFINITE SIZES
75. A COLLABORATIVE PROCESS
76. RESPONSIVE IS DISRUPTIVE
77. RESPONSIVE CHANGES THE DESIGNER
78. RESPONSIVE IS A MATURING LEAP IN THE WEB INDUSTRY
79. IT IS THE MOST EXCITING TIME TO BE A WEB DESIGNER
80. PHILIP ZASTROW @zastrow