-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdesign_principles.html
92 lines (71 loc) · 5.84 KB
/
design_principles.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<title>Design Principles</title>
<meta charset="utf-8">
<link rel=stylesheet href="main.css">
</head>
<body>
<header class="site_header">
<a href="index.html"><img src="images/header3.png" alt="page header" id="top"></a>
</header>
<nav class="dpnav">
<ul>
<li><span class="navheading">Topics</span>
<ul>
<li><a href="htmlinfo.html">What is HTML</a></li>
<li><a href="cssbasics.html">CSS Basics</a></li>
<li><span class="navcurrent">Design Principles</span></li>
</ul>
</li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<main>
<h1>Design Principles</h1>
<section class="main_content_left">
<h2>C.R.A.P Design</h2>
<p>C.R.A.P is the acronym for the four major design principles - contrast, repition, alignment, and proximity. I will discuss each in detail.</p>
<h2>Contrast</h2>
<p>A website must have good contrast in various areas such as: color, structure, font, and visual weight. The use of contrast helps emphasize and highlight important features, makes text more visible, and guides users to differentiate between different elements of the webpage. An example of contrast is shown below. </p>
<p></p>
<div><img src="images/contrast2.jpg" alt="contrast sample" width="500" height="357"></div>
<p>The sample shows contrast of color, font, visual weight, and structure. It utilizes light text on dark background, with enlarged and bolded font for the caption "We've got a new look" to emphasize its importance. The page also makes good use of icons on the left to differentiate between its navigation (icon) with its content (text).</p>
<p>Below are further links to websites with good contrast:</p>
<p><a href="https://cuberto.com/" target="_blank">Cuberto</a>
<a href="http://tannbach-modul.zdf.de/" target="_blank">Tannbach</a>
<a href="https://www.lemonade.com/claims" target="_blank">Lemonade</a></p>
<h2>Repetition</h2>
<p>Website should have a consistent design to unify its elements, so that users can adapt to it faster and easier. Reptition can be applied features such as color, flow, and structure. For example, apply a consistent color theme with a navigation bar in the same location throughout the site. A unified website increases it userability, visual appeal, and branding.</p>
</section>
<section class="main_content_right">
<h2>Alignment</h2>
<p>Good, tidy alignment is necessary to create a visually appealing structure. Good alignment emphasizes organization and clarity, which enhances userability and attractiveness. For example, use consistent margins between elements so that text and content create a smoth flow from one to another.</p>
<div><img src="images/alignment2.png" alt="alignment sample" width="500" height="280"></div>
<p>The sample above shows a strong alignment of various elements. The main content is centered in the middle, with the left margin aligning the logo and social media links, and the right margin aligning the navigation links and email link. Although th elements are scattered across the page, the alignment creates a uniformity that is pleasing to the eyes and easy to navigate between.</p>
<p>Below are further links to websites with good alignment:</p>
<p><a href="https://parall.ax/" target="_blank">Parall</a>
<a href="http://www.thegreat.agency/agency" target="_blank">The Great</a>
<a href="https://www.thesource.ca/en-ca/" target="_blank">The Source</a></p>
<h2>Proximity</h2>
<p>Proximity is about showing the relationship between elements by their proximity with each other. This guides users as to the separation or connection between elements. For example, a caption of an image would be placed in close proximity to the image it describes, or links beloning to the same category would be in closer proximity with each other (i.e. under same heading) than with links belonging to another category. The good use of space not only creates a visually pleasing effect, but also helps users navigate more easily.</p>
<h2>Sources</h2>
<p>Information on this page is sourced from several websites including:</p>
<p><a href="https://www.vandelaydesign.com/contrast-in-web-design/" target="_blank">Vandelay Design</a>
<a href="https://saylordotorg.github.io/text_business-information-systems-design-an-app-for-that/s07-01-c-r-a-p-principles-of-graphic-.html" target="_blank">Saylordotorg</a>
<a href="https://www.awwwards.com/95-inspiring-websites-of-web-design-agencies.html" target="_blank">Awwwards</a></p>
</section>
</main>
<footer>
<div class="footer_left">
©2020 Clara Fok for Comp 1850 CRN (202010-70400)<br>
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="footer_right">
<a href="#top" class="fright">Top</a>
<a href="index.html" class="fright">Home</a>
</div>
</footer>
</body>
</html>