Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Good-enough web design

Claudio B.
June 08, 2015
Programming
2
430

Good-enough web design

Presented at the L.A. Ruby meetup, June 2015

Links from this presentation:

* http://getbootstrap.com
*http://fullscreen.github.io/bh
* http://www.colourlovers.com/palette/1930/cheer_up_emo_kid
* http://www.colourlovers.com/pattern/9/my_dads_tie
* http://www.myfonts.com/fonts/exljbris/museo-slab
* http://fontawesome.io/icons
* https://itunes.apple.com/us/app/channel+-by-fullscreen/id977771271?mt=8
* https://channelpl.us

Claudio B.

June 08, 2015
Tweet

More Decks by Claudio B.

See All by Claudio B.
Unboxing Rails 7
claudiob
2
410
The art of deleting code
claudiob
0
58
Validating and processing the content of a file with Active Storage
claudiob
0
99
What makes for a good onsite coding exercise?
claudiob
0
50
Active Storage
claudiob
8
1.4k
Just when you thought you couldn't refactor anymore…
claudiob
1
210
Write the docs
claudiob
0
69
💩 happens
claudiob
1
130
Rails 5.1: upcoming features
claudiob
16
6.1k

Other Decks in Programming

See All in Programming
Micro Frontends with Modern Angular
manfredsteyer
PRO
0
130
Ebitengine触ってみたぞい
eiei114
0
180
ZennにみるCloudRunとBigQueryによるアプリケーション構築 / zenn-cloudrun-bigquery-serverless
wadayusuke
14
3.9k
Flutter CustomPaint @Flutter MeetUp(In Songdo) - 박제창
itsmedreamwalker
0
190
2023/09/23 「AIキャラクターの言動に深みを持たせる」
sr2mg4
1
640
Migrating From Spring Boot 2 To Spring Boot 3 - What's Jakarta EE Got To Do with It?
ivargrimstad
0
710
Context Window のお話
schroneko
1
160
「ちょうどよい」フロントエンドアーキテクチャを求めて
ari_mharada
0
190
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
tonkotsuboy_com
6
6.9k
実践！Swift API Design Guidelinesに基づいた簡潔明瞭なAPIの作り方
jrsaruo
1
290
コンポーネント設計のすゝめ__ベストプラクティスを学ぶLunch_LT_.pdf
sakurahigashi2
0
150
Compose で Android/iOS アプリを作る
m_coder
0
2.2k

Featured

See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
VelocityConf: Rendering Performance Case Studies
addyosmani
318
23k
Six Lessons from altMBA
skipperchong
17
2.6k
Git: the NoSQL Database
bkeepers
PRO
420
61k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.7k
Producing Creativity
orderedlist
PRO
336
38k
Intergalactic Javascript Robots from Outer Space
tanoku
263
26k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.2k
Writing Fast Ruby
sferik
615
59k
How to train your dragon (web standard)
notwaldorf
70
4.7k

Transcript

  1. Good-enough
    web design
    claudiob.github.io

    View Slide

  2. Start without stylesheets

    View Slide

  3. Add Bootstrap

    View Slide

  4. Add Bootstrap Theme

    View Slide

  5. Find a color palette

    View Slide

  6. Apply the color palette

    View Slide

  7. Apply the color palette

    View Slide

  8. Find a pattern (optional)

    View Slide

  9. Find a pattern (optional)

    View Slide

  10. Add the pattern

    View Slide

  11. Add the pattern

    View Slide

  12. Find a font

    View Slide

  13. Apply the font

    View Slide

  14. Apply the font

    View Slide

  15. Use the grid

    View Slide

  16. Find icons

    View Slide

  17. Add icons

    View Slide

  18. Add icons

    View Slide

  19. Guide the user with HTML

    View Slide

  20. Guide the user with errors

    View Slide

  21. Prevent errors with JS

    View Slide

  22. Guide the user with HTML

    View Slide

  23. Guide the user with errors

    View Slide

  24. Prevent errors with JS

    View Slide

  25. Look ma’, a responsive site!

    View Slide

  26. And a style guide!

    View Slide

  27. Thanks!
    Good-enough
    web design

    View Slide