Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

The Road To Code

Avatar for binx binx
August 08, 2013
1
390

The Road To Code

Avatar for binx

binx

August 08, 2013
Tweet

More Decks by binx

See All by binx
On the Importance of Iteration
Avatar for binx binx
0
110
Designing for Spacecraft Operations
Avatar for binx binx
2
610
Place and Space
Avatar for binx binx
0
520
Error: Success
Avatar for binx binx
0
530
Peak Visualization?
Avatar for binx binx
1
560
The Data Visualization Hustle
Avatar for binx binx
2
450
People, Not Users
Avatar for binx binx
2
250
Data Collection and Memory
Avatar for binx binx
1
230
Memes, Kitsch, and Gangnam Style
Avatar for binx binx
0
380

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Done Done
Avatar for chrislema chrislema
186
16k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.2k

Transcript

  1. The Road to Code Girls Who Code, July 2013

  2. who I am & how I got here

  3. Stamen Design

  4. data visual understandable beautiful

  5. Museum of Modern Art

  6. Facebook Stories

  7. MTV Video Music Awards

  8. Meshu

  9. But life wasn’t always this glamorous :(

  10. Math vs. Programming #include<iostream> using std::cout; using std::cin; using std::endl;

    int main() { int num=0,sum=0,maxvalue=0; cout <<"Please enter a positive number: "; cin >> maxvalue; for(num=1;num<=maxvalue;num++) sum=sum+num; cout<<"The sum is ...."<<sum; return 0; } x(x+1) 2

  11. Data Visualization

  12. None
  13. None
  14. None

  15. My First Portfolio

  16. > !stamen > !javascript > !falling in love with !

    ! web programming

  17. > !stamen > !javascript > !falling in love with !

    ! web programming

  18. > !stamen > !javascript > !falling in love with !

    ! web programming

  19. 1) Accessibility 2) User interactivity 3) The internet is your

    ! ! data source

  20. 1) Accessibility 2) User interaction 3) The internet is your

    ! ! data source

  21. 1) Accessibility 2) User interaction 3) The internet is your

    ! ! data source
  22. None
  23. None

  24. a message from the Department of Uncomfortable Truths:

  25. web programming is complicated

  26. Visual Design Frontend Code Backend Code User Experience Animation

  27. Meshu

  28. Visual Design Frontend Code Backend Code User Experience Animation

  29. Considerations - How should the site feel? - What information

    do you want to convey? - How will people move through your site? Methods - Sketching out user scenarios - Sketching out different page views

  30. Visual Design Frontend Code Backend Code User Experience Animation

  31. SQL Database Django (Python) HTML CSS Javascript Page Render d3.js

    jQuery Polymaps

  32. Visual Design Frontend Code Backend Code User Experience Animation

  33. Considerations - Page layout - Colors and type treatment -

    Hierarchy of information Methods - Sketchbook - Illustrator/Photoshop - HTML/CSS

  34. Visual Design Frontend Code Backend Code User Experience Animation

  35. Considerations - Transitions between different data states - Transitions between

    different page views - Confirming user actions Methods - CSS - Javascript

  36. whew!

  37. Thanks! [email protected]