The Design Process &
                     Analysis


Tuesday, December 13, 11
Goals for today
                  •Review
                  •Look at the design process
                  •SEO, clients perception, pro tips
                  •Usability testing
                  •Branding
                  •Be not burnt out.
Tuesday, December 13, 11
What is Progressive
                       Enhancement?


Tuesday, December 13, 11
A layered approach
                      to Web Design,
                   focused on content,
                    accessibility & the
                          user.
Tuesday, December 13, 11
HTML - Structure
         CSS - Presentation
         JS - Behavior

Tuesday, December 13, 11
The Design Process



Tuesday, December 13, 11
Overview
                  •Define
                  •Structure
                  •Design
                  •Build & Test
                  •Launch

Tuesday, December 13, 11
Define



Tuesday, December 13, 11
Define
               •Identifying goals
               •Identifying target audience
               •Interviewing users
               •Requirement gathering



Tuesday, December 13, 11
Structure



Tuesday, December 13, 11
Structure

               •Content Inventory
               •Site map/data flow
               •Wireframing




Tuesday, December 13, 11
Structure
                                       Site map


                                        home



                  projects              about     client form




                                                  confirmation
                           project                    X

                                                  data output

Tuesday, December 13, 11
Structure
                                    Data flow


                           submit form




                  email                   database




                                         data output   API




Tuesday, December 13, 11
Structure
                              Site map

                            home

                               projects

                                    project
                                    project
                                    project

                               contact

                               about



Tuesday, December 13, 11
Structure
                                Wireframing


               •Information Architecture
               •Design layout




Tuesday, December 13, 11
Structure
                             Wireframing




Tuesday, December 13, 11
Design



Tuesday, December 13, 11
Design
               •Color scheme
               •Design comps
               •Interaction prototypes
               •Design review
               •Client changes

Tuesday, December 13, 11
Design
                            colors




Tuesday, December 13, 11
Design
                           design comp
          Interaction
          model




Tuesday, December 13, 11
Design

                           Interaction model
                                options




Tuesday, December 13, 11
Design
                           Design review




Tuesday, December 13, 11
Design
                            Redo it.




Tuesday, December 13, 11
Build & Test



Tuesday, December 13, 11
Build & Test
               •Font-end
               •Browser Test
               •Back-end (CMS installation)
               •Bug tracking
               •Final presentation to client

Tuesday, December 13, 11
Build & Test
                              Front-end coding




Tuesday, December 13, 11
Build & Test
                              Front-end coding




               1.HTML

               2.CSS

               3.JavaScript




Tuesday, December 13, 11
Build & Test
                            Back-end (CMS installation)




Tuesday, December 13, 11
Build & Test
                             Bug tracking & QA




                                    ...




Tuesday, December 13, 11
Build & Test
                            Final presentation to client




Tuesday, December 13, 11
Launch



Tuesday, December 13, 11
Launch
                           Dev -> Test -> Prod

                            FTP vs. live edit

                               SVN & GIT




Tuesday, December 13, 11
Maintenance



Tuesday, December 13, 11
Maintenance
               fixing stu when it breaks (it always does)




Tuesday, December 13, 11
Tuesday, December 13, 11
[ take a break, they’ve had enough ]




Tuesday, December 13, 11
Search Engine
                           Optimization (SEO)


Tuesday, December 13, 11
SEO


               http://www.youtube.com/watch?v=hF515-0Tduk




Tuesday, December 13, 11
SEO
               •Content
               •Semantic/meaningful HTML
               •Page weight
               •+1’s
               •Links

Tuesday, December 13, 11
SEO


                 <meta name=”keywords” content=”[a list of keywords]”>




Tuesday, December 13, 11
SEO
               •Web Standards
               •Je rey Zeldman




Tuesday, December 13, 11
Usability Testing
                             your design


Tuesday, December 13, 11
Testing




Tuesday, December 13, 11
Branding



Tuesday, December 13, 11
Meaningful Logo Design




Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
Whitespace in Logo Design




Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
Guild of Food Writers


Tuesday, December 13, 11
Tuesday, December 13, 11
Today is in the past
                  •Reviewed
                  •Looked at the design process
                  •SEO, clients perception, pro tips
                  •Usability testing
                  •Branding

Tuesday, December 13, 11
Next Class
                  •Color Wheel
                  •Color Theory
                  •Communicating with color
                  •Typography
                  •Font Design

Tuesday, December 13, 11
Concerns
               E-mail: timwright12@gmail.com

               Twitter: @csskarma

               AIM: csskarma




Tuesday, December 13, 11

Design process