Tweet
Tweet

Slide 1

Slide 1 text

Wade Sakundiak Graphic Designer & Developer at the University of Regina Freelance at Happy Camper Twitter: @WadeS Email: [email protected]

Slide 2

Slide 2 text

Talk More Betterer About Web Stuff & Junk

Slide 3

Slide 3 text

"Honestly, I'm shocked that in 2010 I'm still coming across 'web designers' who can’t code their own designs. No Excuse." @elliotjaystocks Feb. 17, 2010

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

HTML: The markup language of the web.

Slide 6

Slide 6 text

HTML: The markup language of the web. CSS: How things get pretty programatically.

Slide 7

Slide 7 text

HTML: The markup language of the web. CSS: How things get pretty programatically. JavaScript: Full on interaction.

Slide 8

Slide 8 text

HTML: The markup language of the web. CSS: How things get pretty programatically. JavaScript: Full on interaction. Scripting Language: PHP, Ruby, Python, etc.

Slide 9

Slide 9 text

HTML: The markup language of the web. CSS: How things get pretty programatically. JavaScript: Full on interaction. Scripting Language: PHP, Ruby, Python, etc. Database: Super Nerd Territory.

Slide 10

Slide 10 text

Process.

Slide 11

Slide 11 text

Discover. A high-level understanding of the project.

Slide 12

Slide 12 text

Define. Nail down project goals and scope.

Slide 13

Slide 13 text

Design. Content creation, wireframing, technology requirements, visual design.

Slide 14

Slide 14 text

Develop. Front and back-end development. Implementation of visual design.

Slide 15

Slide 15 text

Deploy. Project launch. May be followed with a post-mortem

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

A Brief is not Enough.

Slide 18

Slide 18 text

Spec Sheet Slideshow Twitter/Facebook Share Buttons Events Listing Twitter Widget

Slide 19

Slide 19 text

Content.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Heading: The name of the event. Date: The beginning of the event. Location: The location of the event. Details: An explanation of the event in paragraph form. Contact Details: Email address of the person to contact.

Slide 23

Slide 23 text

Interaction.

Slide 24

Slide 24 text

normal hover active

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Style & Handoff.

Slide 29

Slide 29 text

“One of (Happy Cogs) design goals is to create work that is sustainable, and our design process always aims for the right amount of consistency without homogenization. We like to create design systems that are easy to build, evolve, and use.” Yesenia Perez-Cruz Sweet Systems – http://cog.gd/2au

Slide 30

Slide 30 text

http://styletil.es

Slide 31

Slide 31 text

Grids: Columns, baseline, key divisions (please use a grid).

Slide 32

Slide 32 text

Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables

Slide 33

Slide 33 text

Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges

Slide 34

Slide 34 text

Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges Messaging: Success messages, error handling

Slide 35

Slide 35 text

Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges Messaging: Success messages, error handling Form Elements: Buttons, text inputs, menus, checkboxes

Slide 36

Slide 36 text

Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges Messaging: Success messages, error handling Form Elements: Buttons, text inputs, menus, checkboxes Links & Navigation: Hover, active, disabled and selected states

Slide 37

Slide 37 text

Grids: Columns, baseline, key divisions (please use a grid) Typography: Headings, body copy, captions, lists, tables Colour: Primary and secondary palettes, gradient ranges Messaging: Success messages, error handling Form Elements: Buttons, text inputs, menus, checkboxes Links & Navigation: Hover, active, disabled and selected states Images: Dimensions, margins, placement, usage

Slide 38

Slide 38 text

Do: Name files correctly and only send finals Create a masterfile of reusable elements Name layers descriptively Group layers descriptively Use layer comps Include fonts Dither gradients Use web licensable fonts (Fontspring, Typekit, etc.)

Slide 39

Slide 39 text

Avoid: Using blending modes Images for text in buttons or forms Random or unused guides Including unused layers Extending past the constraints of your grid Background images that don’t tile

Slide 40

Slide 40 text

Don’t Fear The Internet: http://dontfeartheinternet.com/ Designing With Web Standards: http://zeldman.com/dwws/ Bulletproof Web Design: http://simplebits.com/bulletproof/ A Project Guide to UX Design: http://projectuxd.com/ A Practical Guide to Designing for the Web: http://designingfortheweb.co.uk