Skip to content

Commit 7da83e7

Browse files
committed
working on web design page
1 parent e846af3 commit 7da83e7

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

content/pages/04-web-development/15-web-design.markdown

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,24 @@ accomplish their tasks is a major part of building modern web applications.
2222

2323

2424
## Getting started if you have no "eye" for design
25+
Design can feel like something "creative" people understand intuitively,
26+
but like all skills design is something that can be learned. Some people
27+
are faster learners in design just like some folks are quicker in
28+
picking up programming. But anyone can learn how to be a better designer
29+
by learning the basic principles and practicing them.
2530

31+
One of the best mental models for basic design is C.R.A.P., which helped me
32+
grasp why some designs look good while others do not. CRAP is an acronym
33+
for:
2634

35+
* Contrast: noticeable differences from one element to another
36+
* Repetition: elements' consistency
37+
* Alignment: order among all elements
38+
* Proximity: placement between elements and how they are organized
39+
40+
These basic principles all you to start breaking down the problem into
41+
digestible pieces that you can work on rather than feeling like you
42+
"just don't have an eye for design".
2743

2844

2945
## Designing for various screen sizes
@@ -118,6 +134,10 @@ this short list as my absolute favorites that help developers become
118134
[blog post series on building a browser engine](http://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html)
119135
that will show you how to build a simple rendering engine.
120136

137+
* [How to Use C.R.A.P. Design Principles for Better UX](https://vwo.com/blog/crap-design-principles/)
138+
has a good summary of what contrast, repetition, alignment and
139+
proximity means for designing user interfaces.
140+
121141
* [Defining Colors in CSS](https://pineco.de/defining-colors-in-css/)
122142
presents how to define color in your
123143
[Cascading Style Sheets (CSS)](/cascading-style-sheets.html) and breaks

0 commit comments

Comments
 (0)