0
PRINCIPLES
of   WEB DESIGN
PRINCIPLES
   of         WEB DESIGN
with Gavin Elliott
Creative Dude at Codeworks
PRINCIPLES
   of         WEB DESIGN
with Gavin Elliott
Creative Dude at Codeworks




                     follow me @gavi...
CHAPTER I



Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
    introductions




Principles of Web Design   Gavin Elliott | Codeworks
CHAPTER I
Life at Codeworks
CHAPTER I
Life at Codeworks


     Creativity
CHAPTER I
Life at Codeworks


     Creativity
     Marketing
CHAPTER I
Life at Codeworks


     Creativity
     Marketing
  Thinking Digital
CHAPTER I
Life at Codeworks


     Creativity      DIBI
     Marketing
  Thinking Digital
CHAPTER I
Life at Codeworks


     Creativity            DIBI
     Marketing       Codeworks Connect
  Thinking Digital
CHAPTER I
Life at Codeworks


     Creativity            DIBI
     Marketing       Codeworks Connect
  Thinking Digital   ...
WHAT ABOUT YOU
WHAT ABOUT YOU
Where do you work?
WHAT ABOUT YOU
Where do you work?

 How long have you
been in the industry?
WHAT ABOUT YOU
Where do you work?

 How long have you
been in the industry?


 What are your sole
  responsibilities?
WHAT ABOUT YOU
Where do you work?      What do you like?

 How long have you
been in the industry?


 What are your sole
 ...
WHAT ABOUT YOU
Where do you work?      What do you like?

 How long have you        What do you
been in the industry?     ...
WHAT ABOUT YOU
Where do you work?      What do you like?

 How long have you        What do you
been in the industry?     ...
CHAPTER II
Understanding the ‘minefield’ of our industry...
What is happening now?
What is happening now?

   A horde of lovely web goodness!
What is happening now?

   A horde of lovely web goodness!

       Web Typography
What is happening now?

   A horde of lovely web goodness!

       Web Typography
       CSS3
What is happening now?

   A horde of lovely web goodness!

       Web Typography
       CSS3
        jQuery
What is happening now?

   A horde of lovely web goodness!

       Web Typography
       CSS3
        jQuery
       HTML5
What is happening now?

   A horde of lovely web goodness!

       Web Typography
       CSS3
        jQuery
       HTML5
...
Web Typography
Web Typography
Web Typography

typekit.com
Web Typography

typekit.com
 - easy to setup
Web Typography

typekit.com
 - easy to setup
 - using one line
 of code
Web Typography

typekit.com
 - easy to setup
 - using one line
 of code
 - free(ish)
Web Typography

typekit.com
 - easy to setup
 - using one line
 of code
 - free(ish)
 - extended-library
Web Typography

typekit.com
 - easy to setup
 - using one line
 of code
 - free(ish)
 - extended-library
 - standards comp...
Web Typography
Web Typography
Web Typography

@font-face
Web Typography

@font-face
 - easy to setup
Web Typography

@font-face
 - easy to setup
 - using one line
 of code
Web Typography

@font-face
 - easy to setup
 - using one line
 of code
 - free(ish)
Web Typography

@font-face
 - easy to setup
 - using one line
 of code
 - free(ish)
 - dependent on
 users font-library
Web Typography
Web Typography
Web Typography

fontdeck.com
Web Typography

fontdeck.com
 - created by the guys
 at clearleft.com
Web Typography

fontdeck.com
 - created by the guys
 at clearleft.com
 - sign up for when it
 is ready
Web Typography

fontdeck.com
 - created by the guys
 at clearleft.com
 - sign up for when it
 is ready
 - not much news on...
Web Typography

fontdeck.com
 - created by the guys
 at clearleft.com
 - sign up for when it
 is ready
 - not much news on...
Using @font-face
Using @font-face
The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options ...
Using Fonts on The Web
Using Fonts on The Web

  Think about the users
Using Fonts on The Web

  Think about the users
   It doesn’t always have to look the same
   in every browser.
Using Fonts on The Web

  Think about the users
   It doesn’t always have to look the same
   in every browser.
   Check e...
Using Fonts on The Web

  Think about the users
   It doesn’t always have to look the same
   in every browser.
   Check e...
Web Typography Links
Web Typography Links

typekit.com
Web Typography Links

typekit.com      font-face.com
Web Typography Links

typekit.com                  font-face.com

              fontdeck.com
Web Typography Links

typekit.com                  font-face.com

              fontdeck.com


                      fonts...
Web Typography Links

typekit.com                      font-face.com

              fontdeck.com


                      f...
Web Typography Links

typekit.com                      font-face.com

              fontdeck.com


                      f...
Web Typography Links

typekit.com                      font-face.com

              fontdeck.com


                      f...
Web Typography Links

typekit.com                                font-face.com

                        fontdeck.com

I ha...
CSS3
CSS3
 We’re getting so much to play with!
CSS3
 We’re getting so much to play with!

   font-styling
CSS3
 We’re getting so much to play with!

   font-styling
  text-styling
CSS3
 We’re getting so much to play with!

   font-styling
  text-styling
  box-styling
CSS3
 We’re getting so much to play with!

   font-styling
  text-styling
  box-styling
  gradients
CSS3
 We’re getting so much to play with!

   font-styling           RGB(a) Colours
  text-styling
  box-styling
  gradien...
CSS3
 We’re getting so much to play with!

   font-styling           RGB(a) Colours
  text-styling            Multiple Bac...
CSS3
 We’re getting so much to play with!

   font-styling           RGB(a) Colours
  text-styling            Multiple Bac...
CSS3
 We’re getting so much to play with!

   font-styling           RGB(a) Colours
  text-styling            Multiple Bac...
CSS3
CSS3


 We’ll play with these a little bit later!
jQuery
jQuery
  Time-travelling with jQuery
jQuery
  Time-travelling with jQuery

     http://razorjack.net/quicksand
jQuery
  Time-travelling with jQuery

     http://razorjack.net/quicksand

     http://www.bensky.co.uk/my-work
jQuery
  Time-travelling with jQuery

     http://razorjack.net/quicksand

     http://www.bensky.co.uk/my-work

     http...
jQuery
  Time-travelling with jQuery

     http://razorjack.net/quicksand

     http://www.bensky.co.uk/my-work

     http...
jQuery - Let’s do anything
jQuery - Let’s do anything

 “If you have an idea of how you want
 something to work, look or feel and CSS/
 XHTML cannot ...
HTML5
HTML5
Do you wait?
HTML5
Do you wait?
Do you go?
HTML5
Do you wait?
Do you go?
Is it ready?
HTML5
Do you wait?
Do you go?
Is it ready?
Different Mark-up
HTML5
Do you wait?
Do you go?
Is it ready?
Different Mark-up
Easier/Simpler Mark-up
Attention to Detail
Attention to Detail
 I dribbble, do you?
Attention to Detail
 I dribbble, do you?
 The finer details...
Attention to Detail
 I dribbble, do you?   - dribbble.com
 The finer details...
Attention to Detail
 I dribbble, do you?   - dribbble.com
 The finer details...
 White space
Attention to Detail
 I dribbble, do you?   - dribbble.com
 The finer details...
 White space
 Grid systems
http://crushlovely.com/
http://squaredeye.com/
What’s going to happen in the
future?
What’s going to happen in the
future?
  More freedom
What’s going to happen in the
future?
  More freedom
  Better standards?
What’s going to happen in the
future?
  More freedom
  Better standards?
  More platforms
What’s going to happen in the
future?
  More freedom
  Better standards?
  More platforms
    Mobile
What’s going to happen in the
future?
  More freedom
  Better standards?
  More platforms
    Mobile       iPad
What’s going to happen in the
future?
  More freedom
  Better standards?
  More platforms
    Mobile       iPad   Mobile A...
What’s going to happen in the
future?
  More freedom
  Better standards?
  More platforms
    Mobile       iPad   Mobile A...
Niche down or grow   UP!
Niche down or grow        UP!
“You can be good at many or a master of
one...”
Niche down or grow        UP!
“You can be good at many or a master of
one...”


What would you prefer to be doing?
CHAPTER III
CHAPTER III
client relations
CHAPTER III
client relations
     Client Education
CHAPTER III
client relations
     Client Education
     Client Interaction
CHAPTER III
client relations
     Client Education
     Client Interaction
     Understanding the job
CHAPTER III
client relations
     Client Education
     Client Interaction
     Understanding the job
     Spec’ing Out
Client Education
Client Education

   Clients, generally have no idea of what
   you’re doing or why you’re doing it.
   They just like thi...
Client Education
Client Education

   Having a client lost in translation can break
   down an entire job. Educate them, help
   them and b...
Client Education
Client Interaction
Client Interaction

    Face-to-face
Client Interaction

    Face-to-face
    Over the phone
Client Interaction

    Face-to-face
    Over the phone
    Never leave them feeling lost
Client Interaction

    Face-to-face
    Over the phone
    Never leave them feeling lost
    Friends or Clients
Client Interaction

    Face-to-face
    Over the phone
    Never leave them feeling lost
    Friends or Clients
    Frien...
Client Interaction

    Face-to-face
    Over the phone
    Never leave them feeling lost
    Friends or Clients
    Frien...
Understanding the job
Understanding the job
 Questions to ask your prospective client...
Understanding the job
 Questions to ask your prospective client...

   What is your budget?
Understanding the job
 Questions to ask your prospective client...

   What is your budget?
    Do you already have a webs...
Understanding the job
 Questions to ask your prospective client...

   What is your budget?
    Do you already have a webs...
Understanding the job
 Questions to ask your prospective client...

   What is your budget?
    Do you already have a webs...
Understanding the job
 Questions to ask your prospective client...

   What is your budget?
    Do you already have a webs...
Spec’ing the Job Out
Spec’ing the Job Out
 Doing a job specification can aid the easy
 flow of a new web design project.
Spec’ing the Job Out
 Doing a job specification can aid the easy
 flow of a new web design project.

 Both parties know exac...
Spec’ing the Job Out
 Doing a job specification can aid the easy
 flow of a new web design project.

 Both parties know exac...
Spec’ing the Job Out
 Doing a job specification can aid the easy
 flow of a new web design project.

 Both parties know exac...
Spec’ing the Job Out



 Both parties know exactly what is expected
 of them and when.

 Within your business, you can pla...
Spec’ing the Job Out




 Within your business, you can plan how
 and when the stages of work take place.
 Set to-do’s and...
Spec’ing the Job Out




 Set to-do’s and milestones for the client and
 yourself.
Spec’ing the Job Out
Spec’ing the Job Out



 Do you spec jobs about?
 If so, how?
CHAPTER IV
CHAPTER IV
The Web Principles
CHAPTER IV
The Web Principles
    Process Mapping
CHAPTER IV
The Web Principles
    Process Mapping
    Wireframing
CHAPTER IV
The Web Principles
    Process Mapping
    Wireframing
    The reasons and theory behind them
CHAPTER IV
The Web Principles
    Process Mapping
    Wireframing
    The reasons and theory behind them
    Using softwar...
CHAPTER IV
The Web Principles
    Process Mapping
    Wireframing
    The reasons and theory behind them
    Using softwar...
Process Mapping
Process Mapping
   What is process mapping?
Process Mapping
   What is process mapping?

   Why should you use it?
Process Mapping
   What is process mapping?

   Why should you use it?

   Using it for usability/user experience.
Process Mapping
   What is process mapping?

   Why should you use it?

   Using it for usability/user experience.

   Get...
Wire Framing
Wire Framing

   What are they?
Wire Framing

   What are they?
   Why do we use them?
Wire Framing

   What are they?
   Why do we use them?
   When should they be used?
Wire Framing

   What are they?
   Why do we use them?
   When should they be used?
   How are they used in a project life...
Wire Framing

   What are they?
   Why do we use them?
   When should they be used?
   How are they used in a project life...
What are wire frames?
What are wire frames?

   A visual representation brought together
   from a culmination of user research,
   business obj...
What are wire frames?

   A visual representation brought together
   from a culmination of user research,
   business obj...
What are wire frames?

   A visual representation brought together
   from a culmination of user research,
   business obj...
Why do we use wire frames?
Why do we use wire frames?

   Gain an understanding
Why do we use wire frames?

   Gain an understanding

   Help your project workflow
Why do we use wire frames?

   Gain an understanding

   Help your project workflow

   Help your clients understand
When should wire frames be used?
When should wire frames be used?

   Strategy - What you want to achieve
When should wire frames be used?

   Strategy - What you want to achieve
   Scope - What can be achieved
When should wire frames be used?

   Strategy - What you want to achieve
   Scope - What can be achieved
   Structure - St...
When should wire frames be used?

   Strategy - What you want to achieve
   Scope - What can be achieved
   Structure - St...
When should wire frames be used?

   Strategy - What you want to achieve
   Scope - What can be achieved
   Structure - St...
How are wire frames used in your
project life cycle?
How are wire frames used in your
project life cycle?

   Wire frames can be used within a business/
   across the business
How are wire frames used in your
project life cycle?

   Wire frames can be used within a business/
   across the business...
How are wire frames used in your
project life cycle?

   Wire frames can be used within a business/
   across the business...
Why are wire frames important?
Why are wire frames important?
   Accurate planning for functional
   specifications
Why are wire frames important?
   Accurate planning for functional
   specifications

   Ensure all project members are bri...
Why are wire frames important?
   Accurate planning for functional
   specifications

   Ensure all project members are bri...
Why are wire frames important?
   Accurate planning for functional
   specifications

   Ensure all project members are bri...
What wire frame software is
available?
What wire frame software is
available?
   Balsamiq
   http://www.balsamiq.com/
What wire frame software is
available?
   Balsamiq
   http://www.balsamiq.com/



   Omnigraffe
   http://www.omnigroup.co...
What wire frame software is
available?
   Balsamiq
   http://www.balsamiq.com/



   Omnigraffe
   http://www.omnigroup.co...
What wire frame software is
available?
   Balsamiq
   http://www.balsamiq.com/



   Omnigraffe
   http://www.omnigroup.co...
CHAPTER V
CHAPTER V
The software
CHAPTER V
Going from wires to design
   The software
CHAPTER V
Going from wires to design
   The software
   Designing in the browser
CHAPTER V
Going from wires to design
   The software
   Designing in the browser
   Graceful degradation
CHAPTER V
Going from wires to design
   The software
   Designing in the browser
   Graceful degradation
   Progressive en...
CHAPTER V
Going from wires to design
   The software
   Designing in the browser
   Graceful degradation
   Progressive en...
CHAPTER V
Going from wires to design
   The software
   Designing in the browser
   Graceful degradation
   Progressive en...
THE
FREEDOM
PROJECT
Thanks
 YOU’RE
AWESOME
Thanks
 YOU’RE
AWESOME
 follow me @gavinelliott
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Principles Of Web Design Workshop
Upcoming SlideShare
Loading in...5
×

Principles Of Web Design Workshop

1,636

Published on

A talk for Codeworks Connect members on principles of web design with a bit of client communication and business related discussions mixed in.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,636
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
58
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide


















































































































  • At any point throughout this that you feel inspired. Open your notebooks and start wireframing, today is a day of freedom.



































































































  • Transcript of "Principles Of Web Design Workshop"

    1. 1. PRINCIPLES of WEB DESIGN
    2. 2. PRINCIPLES of WEB DESIGN with Gavin Elliott Creative Dude at Codeworks
    3. 3. PRINCIPLES of WEB DESIGN with Gavin Elliott Creative Dude at Codeworks follow me @gavinelliott
    4. 4. CHAPTER I Principles of Web Design Gavin Elliott | Codeworks
    5. 5. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    6. 6. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    7. 7. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    8. 8. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    9. 9. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    10. 10. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    11. 11. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    12. 12. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    13. 13. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    14. 14. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    15. 15. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    16. 16. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    17. 17. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    18. 18. CHAPTER I introductions Principles of Web Design Gavin Elliott | Codeworks
    19. 19. CHAPTER I Life at Codeworks
    20. 20. CHAPTER I Life at Codeworks Creativity
    21. 21. CHAPTER I Life at Codeworks Creativity Marketing
    22. 22. CHAPTER I Life at Codeworks Creativity Marketing Thinking Digital
    23. 23. CHAPTER I Life at Codeworks Creativity DIBI Marketing Thinking Digital
    24. 24. CHAPTER I Life at Codeworks Creativity DIBI Marketing Codeworks Connect Thinking Digital
    25. 25. CHAPTER I Life at Codeworks Creativity DIBI Marketing Codeworks Connect Thinking Digital Communications
    26. 26. WHAT ABOUT YOU
    27. 27. WHAT ABOUT YOU Where do you work?
    28. 28. WHAT ABOUT YOU Where do you work? How long have you been in the industry?
    29. 29. WHAT ABOUT YOU Where do you work? How long have you been in the industry? What are your sole responsibilities?
    30. 30. WHAT ABOUT YOU Where do you work? What do you like? How long have you been in the industry? What are your sole responsibilities?
    31. 31. WHAT ABOUT YOU Where do you work? What do you like? How long have you What do you been in the industry? love? What are your sole responsibilities?
    32. 32. WHAT ABOUT YOU Where do you work? What do you like? How long have you What do you been in the industry? love? What will you What are your sole be doing in 10 responsibilities? years time?
    33. 33. CHAPTER II Understanding the ‘minefield’ of our industry...
    34. 34. What is happening now?
    35. 35. What is happening now? A horde of lovely web goodness!
    36. 36. What is happening now? A horde of lovely web goodness! Web Typography
    37. 37. What is happening now? A horde of lovely web goodness! Web Typography CSS3
    38. 38. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery
    39. 39. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery HTML5
    40. 40. What is happening now? A horde of lovely web goodness! Web Typography CSS3 jQuery HTML5 Attention to detail
    41. 41. Web Typography
    42. 42. Web Typography
    43. 43. Web Typography typekit.com
    44. 44. Web Typography typekit.com - easy to setup
    45. 45. Web Typography typekit.com - easy to setup - using one line of code
    46. 46. Web Typography typekit.com - easy to setup - using one line of code - free(ish)
    47. 47. Web Typography typekit.com - easy to setup - using one line of code - free(ish) - extended-library
    48. 48. Web Typography typekit.com - easy to setup - using one line of code - free(ish) - extended-library - standards compliant
    49. 49. Web Typography
    50. 50. Web Typography
    51. 51. Web Typography @font-face
    52. 52. Web Typography @font-face - easy to setup
    53. 53. Web Typography @font-face - easy to setup - using one line of code
    54. 54. Web Typography @font-face - easy to setup - using one line of code - free(ish)
    55. 55. Web Typography @font-face - easy to setup - using one line of code - free(ish) - dependent on users font-library
    56. 56. Web Typography
    57. 57. Web Typography
    58. 58. Web Typography fontdeck.com
    59. 59. Web Typography fontdeck.com - created by the guys at clearleft.com
    60. 60. Web Typography fontdeck.com - created by the guys at clearleft.com - sign up for when it is ready
    61. 61. Web Typography fontdeck.com - created by the guys at clearleft.com - sign up for when it is ready - not much news on availability/pricing
    62. 62. Web Typography fontdeck.com - created by the guys at clearleft.com - sign up for when it is ready - not much news on availability/pricing - similar to typekit? No one knows, yet.
    63. 63. Using @font-face
    64. 64. Using @font-face The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features. Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc). @font-face { font-family: DeliciousRoman; src: url(http://www.font-face.com/fonts/delicious/Delicious- Roman.otf); font-weight:400; } Then just use it like any other font in any other style rule. p { font-family: DeliciousRoman, Helvetica, Arial, sans-serif; } That's pretty much it for basic implementation.
    65. 65. Using Fonts on The Web
    66. 66. Using Fonts on The Web Think about the users
    67. 67. Using Fonts on The Web Think about the users It doesn’t always have to look the same in every browser.
    68. 68. Using Fonts on The Web Think about the users It doesn’t always have to look the same in every browser. Check every browser...
    69. 69. Using Fonts on The Web Think about the users It doesn’t always have to look the same in every browser. Check every browser... Always have a roll-back.
    70. 70. Web Typography Links
    71. 71. Web Typography Links typekit.com
    72. 72. Web Typography Links typekit.com font-face.com
    73. 73. Web Typography Links typekit.com font-face.com fontdeck.com
    74. 74. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com
    75. 75. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library of font-face fonts
    76. 76. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library CSS font-face of font-face generator fonts
    77. 77. Web Typography Links typekit.com font-face.com fontdeck.com fontsquirrel.com Large library CSS font-face of font-face generator fonts
    78. 78. Web Typography Links typekit.com font-face.com fontdeck.com I have some invites give me your email address and I’ll sort one out for you. fontsquirrel.com Large library CSS font-face of font-face generator fonts
    79. 79. CSS3
    80. 80. CSS3 We’re getting so much to play with!
    81. 81. CSS3 We’re getting so much to play with! font-styling
    82. 82. CSS3 We’re getting so much to play with! font-styling text-styling
    83. 83. CSS3 We’re getting so much to play with! font-styling text-styling box-styling
    84. 84. CSS3 We’re getting so much to play with! font-styling text-styling box-styling gradients
    85. 85. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling box-styling gradients
    86. 86. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling gradients
    87. 87. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling Transforms gradients
    88. 88. CSS3 We’re getting so much to play with! font-styling RGB(a) Colours text-styling Multiple Backgrounds box-styling Transforms gradients Columns
    89. 89. CSS3
    90. 90. CSS3 We’ll play with these a little bit later!
    91. 91. jQuery
    92. 92. jQuery Time-travelling with jQuery
    93. 93. jQuery Time-travelling with jQuery http://razorjack.net/quicksand
    94. 94. jQuery Time-travelling with jQuery http://razorjack.net/quicksand http://www.bensky.co.uk/my-work
    95. 95. jQuery Time-travelling with jQuery http://razorjack.net/quicksand http://www.bensky.co.uk/my-work http://www.giraffe.net
    96. 96. jQuery Time-travelling with jQuery http://razorjack.net/quicksand http://www.bensky.co.uk/my-work http://www.giraffe.net http://www.obox-design.com
    97. 97. jQuery - Let’s do anything
    98. 98. jQuery - Let’s do anything “If you have an idea of how you want something to work, look or feel and CSS/ XHTML cannot enable you to do it. Look to jQuery, it can add a lot to the end result.”
    99. 99. HTML5
    100. 100. HTML5 Do you wait?
    101. 101. HTML5 Do you wait? Do you go?
    102. 102. HTML5 Do you wait? Do you go? Is it ready?
    103. 103. HTML5 Do you wait? Do you go? Is it ready? Different Mark-up
    104. 104. HTML5 Do you wait? Do you go? Is it ready? Different Mark-up Easier/Simpler Mark-up
    105. 105. Attention to Detail
    106. 106. Attention to Detail I dribbble, do you?
    107. 107. Attention to Detail I dribbble, do you? The finer details...
    108. 108. Attention to Detail I dribbble, do you? - dribbble.com The finer details...
    109. 109. Attention to Detail I dribbble, do you? - dribbble.com The finer details... White space
    110. 110. Attention to Detail I dribbble, do you? - dribbble.com The finer details... White space Grid systems
    111. 111. http://crushlovely.com/
    112. 112. http://squaredeye.com/
    113. 113. What’s going to happen in the future?
    114. 114. What’s going to happen in the future? More freedom
    115. 115. What’s going to happen in the future? More freedom Better standards?
    116. 116. What’s going to happen in the future? More freedom Better standards? More platforms
    117. 117. What’s going to happen in the future? More freedom Better standards? More platforms Mobile
    118. 118. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad
    119. 119. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad Mobile Apps
    120. 120. What’s going to happen in the future? More freedom Better standards? More platforms Mobile iPad Mobile Apps Web Apps
    121. 121. Niche down or grow UP!
    122. 122. Niche down or grow UP! “You can be good at many or a master of one...”
    123. 123. Niche down or grow UP! “You can be good at many or a master of one...” What would you prefer to be doing?
    124. 124. CHAPTER III
    125. 125. CHAPTER III client relations
    126. 126. CHAPTER III client relations Client Education
    127. 127. CHAPTER III client relations Client Education Client Interaction
    128. 128. CHAPTER III client relations Client Education Client Interaction Understanding the job
    129. 129. CHAPTER III client relations Client Education Client Interaction Understanding the job Spec’ing Out
    130. 130. Client Education
    131. 131. Client Education Clients, generally have no idea of what you’re doing or why you’re doing it. They just like things to be ‘pretty’. /generally
    132. 132. Client Education
    133. 133. Client Education Having a client lost in translation can break down an entire job. Educate them, help them and both businesses move forward.
    134. 134. Client Education
    135. 135. Client Interaction
    136. 136. Client Interaction Face-to-face
    137. 137. Client Interaction Face-to-face Over the phone
    138. 138. Client Interaction Face-to-face Over the phone Never leave them feeling lost
    139. 139. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients
    140. 140. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients Friends and Clients
    141. 141. Client Interaction Face-to-face Over the phone Never leave them feeling lost Friends or Clients Friends and Clients Build lasting relationships
    142. 142. Understanding the job
    143. 143. Understanding the job Questions to ask your prospective client...
    144. 144. Understanding the job Questions to ask your prospective client... What is your budget?
    145. 145. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website?
    146. 146. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website? What are your business objectives?
    147. 147. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website? What are your business objectives? Who is your target audience?
    148. 148. Understanding the job Questions to ask your prospective client... What is your budget? Do you already have a website? What are your business objectives? Who is your target audience? The easiest way is to use a client worksheet...
    149. 149. Spec’ing the Job Out
    150. 150. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project.
    151. 151. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project. Both parties know exactly what is expected of them and when.
    152. 152. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project. Both parties know exactly what is expected of them and when. Within your business, you can plan how and when the stages of work take place.
    153. 153. Spec’ing the Job Out Doing a job specification can aid the easy flow of a new web design project. Both parties know exactly what is expected of them and when. Within your business, you can plan how and when the stages of work take place. Set to-do’s and milestones for the client and yourself.
    154. 154. Spec’ing the Job Out Both parties know exactly what is expected of them and when. Within your business, you can plan how and when the stages of work take place. Set to-do’s and milestones for the client and yourself.
    155. 155. Spec’ing the Job Out Within your business, you can plan how and when the stages of work take place. Set to-do’s and milestones for the client and yourself.
    156. 156. Spec’ing the Job Out Set to-do’s and milestones for the client and yourself.
    157. 157. Spec’ing the Job Out
    158. 158. Spec’ing the Job Out Do you spec jobs about? If so, how?
    159. 159. CHAPTER IV
    160. 160. CHAPTER IV The Web Principles
    161. 161. CHAPTER IV The Web Principles Process Mapping
    162. 162. CHAPTER IV The Web Principles Process Mapping Wireframing
    163. 163. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them
    164. 164. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them Using software to draw your wireframes
    165. 165. CHAPTER IV The Web Principles Process Mapping Wireframing The reasons and theory behind them Using software to draw your wireframes Getting down to business
    166. 166. Process Mapping
    167. 167. Process Mapping What is process mapping?
    168. 168. Process Mapping What is process mapping? Why should you use it?
    169. 169. Process Mapping What is process mapping? Why should you use it? Using it for usability/user experience.
    170. 170. Process Mapping What is process mapping? Why should you use it? Using it for usability/user experience. Getting the client involved.
    171. 171. Wire Framing
    172. 172. Wire Framing What are they?
    173. 173. Wire Framing What are they? Why do we use them?
    174. 174. Wire Framing What are they? Why do we use them? When should they be used?
    175. 175. Wire Framing What are they? Why do we use them? When should they be used? How are they used in a project life-cycle?
    176. 176. Wire Framing What are they? Why do we use them? When should they be used? How are they used in a project life-cycle? Why are they important?
    177. 177. What are wire frames?
    178. 178. What are wire frames? A visual representation brought together from a culmination of user research, business objectives and content.
    179. 179. What are wire frames? A visual representation brought together from a culmination of user research, business objectives and content. They SHOULD NOT be handed to anyone out of context.
    180. 180. What are wire frames? A visual representation brought together from a culmination of user research, business objectives and content. They SHOULD NOT be handed to anyone out of context. They are a continuous working environment.
    181. 181. Why do we use wire frames?
    182. 182. Why do we use wire frames? Gain an understanding
    183. 183. Why do we use wire frames? Gain an understanding Help your project workflow
    184. 184. Why do we use wire frames? Gain an understanding Help your project workflow Help your clients understand
    185. 185. When should wire frames be used?
    186. 186. When should wire frames be used? Strategy - What you want to achieve
    187. 187. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved
    188. 188. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved Structure - Structure your new project
    189. 189. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved Structure - Structure your new project Skeleton -The rough stuff
    190. 190. When should wire frames be used? Strategy - What you want to achieve Scope - What can be achieved Structure - Structure your new project Skeleton -The rough stuff Surface - The polish
    191. 191. How are wire frames used in your project life cycle?
    192. 192. How are wire frames used in your project life cycle? Wire frames can be used within a business/ across the business
    193. 193. How are wire frames used in your project life cycle? Wire frames can be used within a business/ across the business These same wire frames can be used across the entire life-cycle of a project.
    194. 194. How are wire frames used in your project life cycle? Wire frames can be used within a business/ across the business These same wire frames can be used across the entire life-cycle of a project. From design to usability to SEO to Marketing and back again.
    195. 195. Why are wire frames important?
    196. 196. Why are wire frames important? Accurate planning for functional specifications
    197. 197. Why are wire frames important? Accurate planning for functional specifications Ensure all project members are briefed
    198. 198. Why are wire frames important? Accurate planning for functional specifications Ensure all project members are briefed Enable developers to start work on functionality before visual designing begins.
    199. 199. Why are wire frames important? Accurate planning for functional specifications Ensure all project members are briefed Enable developers to start work on functionality before visual designing begins. Track changes in the design process, refine your design during the project with ease.
    200. 200. What wire frame software is available?
    201. 201. What wire frame software is available? Balsamiq http://www.balsamiq.com/
    202. 202. What wire frame software is available? Balsamiq http://www.balsamiq.com/ Omnigraffe http://www.omnigroup.com/applications/omnigraffle/
    203. 203. What wire frame software is available? Balsamiq http://www.balsamiq.com/ Omnigraffe http://www.omnigroup.com/applications/omnigraffle/ Visio http://office.microsoft.com/en-us/visio/default.aspx
    204. 204. What wire frame software is available? Balsamiq http://www.balsamiq.com/ Omnigraffe http://www.omnigroup.com/applications/omnigraffle/ Visio http://office.microsoft.com/en-us/visio/default.aspx We’ll look at these in more depth this afternoon!
    205. 205. CHAPTER V
    206. 206. CHAPTER V The software
    207. 207. CHAPTER V Going from wires to design The software
    208. 208. CHAPTER V Going from wires to design The software Designing in the browser
    209. 209. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation
    210. 210. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation Progressive enhancement
    211. 211. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation Progressive enhancement Don’t be scared of doing something different
    212. 212. CHAPTER V Going from wires to design The software Designing in the browser Graceful degradation Progressive enhancement Don’t be scared of doing something different Forget what you’ve been taught, you’re a creative so get creative!
    213. 213. THE FREEDOM PROJECT
    214. 214. Thanks YOU’RE AWESOME
    215. 215. Thanks YOU’RE AWESOME follow me @gavinelliott
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×