-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
149 lines (123 loc) · 7.01 KB
/
Copy pathindex.html
File metadata and controls
149 lines (123 loc) · 7.01 KB
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="main.css"/>
<title>WSP: Rick Yoder</title>
</head>
<body>
<header>
<h1 class="logo"><WSP/></h1>
</header>
<div id="poster">
<p class="foreground">Website design and development is crucial to the growth and upkeep of the worldwide web. Keep updated on Web 2.0 components by following this blog, and checking out the cool examples.</p>
</div>
<article>
<h2>Tiled Details</h2>
<img src="images/tiles.png" alt="Tiled Details"/>
<h3>What To Practice/Learn</h3>
<p>
Giving visitors too much or too little information could be the difference between a lot or a few page hits, and in the case of eCommerce, a lot or a loss in sales.
The idea is to separate content and let the user digest it, without giving too much information or too little. That way, they don't feel overwhelmed or deterred. Having tiles allows chunks of data to be displayed to a user, insead of a long paragraph.
The goal is to accomplish the creation of these tiles and be able to utilize this concept with any website design using a multitude of different themes, colors, and icons.
</p>
<h3>Relation to the Website Development/Design Field</h3>
<p>
As a web developer/designer, the goal is to get a steady flow of customers/visitors. Having too much text to read on a single page without proper whitespace and content separation means you could lose business, or worse, lose money.
Separating content is extremely important to get recurring visitors or sales on a website. Your content directly drives users--remember that!
</p>
<div>
<a href="demos/tiled-details.html"><button>View Demo</button></a>
</div>
</article>
<article>
<h2>Separated Sections</h2>
<img src="images/separated_sections.png" alt="Separated Sections"/>
<h3>What To Practice/Learn</h3>
<p>
Effective whitespace allows users to distinguish one part of a website from another. Trying it out with different layouts, themes, and colors lets a developer realize how they best separate pieces of their page, and sorting their content appropriately.
</p>
<h3>Relation to the Website Development/Design Field</h3>
<p>
Keeping content organized and sorted is very important to having an easy-to-navigate web page. Web pages thare are too clunky and cluttered won't get that many visitors. And with new design standards such as Google's Material Design, designers have a better idea than ever on how to design effective pages and apps!
</p>
<div>
<a href="demos/separated-sections.html"><button>View Demo</button></a>
</div>
</article>
<article>
<h2>Navigation With FX</h2>
<img src="images/nav_with_fx.png" alt="Navigation with FX"/>
<h3>What To Practice/Learn</h3>
<p>
Making an easy-to-navigate site requires a good navigation bar. The concept is to create a navbar that helps users reach the most important pages of the site as fast as possible. Key things to keep in mind is the transitions and effects one uses on a navbar; remember that it's supposed to be a smooth and effecient way to traverse a web site. It can't be too bulky, and the effects can't be too slow.
</p>
<h3>Relation to the Website Development/Design Field</h3>
<p>
Besides a search engine for a website, the navigation bar is the quickest way for users to traverse your site, but that doesn't mean you can't also make it look good. There's hundreds of different combinations of effects you can do for navbars using CSS or a framework like jQuery.
Making a navbar that feels natural to the click/touch is important. A website should feel like an experience, not just software.
</p>
<div>
<a href="demos/navigation-with-fx.html"><button>View Demo</button></a>
</div>
</article>
<article>
<h2>CTA With Poster</h2>
<img src="images/cta_with_poster.png" alt="CTA with Poster"/>
<h3>What To Practice/Learn</h3>
<p>
Creating an effective CTA should be the main goal for any website.
What do you want your users to do for you?
Buy a product?
Refer their friends for a service?
Upload their documents?
Send a payment to you for a good/service?
The list can go on and on. It's very important to bring attention to the CTA, which is what I personally can improve upon. I as a designer tend to be bad at making things "pop" out and smack the user in the face.
</p>
<h3>Relation to the Website Development/Design Field</h3>
<p>
As with any form of advertising, the CTA on a website is crucial to have people do exactly what you want them to do on your site. Users are more than likely coming to your site looking to accomplish a task anyways; it's important to sure you bring the Call to Action front and center for them.
</p>
<div>
<a href="demos/cta-with-poster.html"><button>View Demo</button></a>
</div>
</article>
<article>
<h2>Interactive Shopping Tiles</h2>
<h3 class="featured">Featured Article</h3>
<img src="images/interactive_shopping_tiles.png" alt="Interactive Shopping Tiles"/>
<h3>What To Practice/Learn</h3>
<p>
eCommerce is an evergrowing online field. Perfecting it should be a field in itself. Along with keeping content separated, you also need to try to find creative ways to give users "quick details" on items.
You need to find the perfect balance between content and padding.
Otherwise you will lose customers.
This is where the balance between those two elements matters most. Also, focusing on the relevancy of the details is also important for quick details.
</p>
<h3>Relation to the Website Development/Design Field</h3>
<p>
eCommerce is an important part of online traffic.
Creating successful eCommerce helps maintain global sales for business large and small.
Not to mention eCommerce accounts for a large percentage of business profits who sell things online and in a brick and mortar location.
Creating an eCommerce site that is fast, fluid, and effective at helping people can go a long way to rake in thousands, millions, or even billions of dollars in revenue.
</p>
<h3>How to Go About Creating This</h3>
<ul>
<li>Create a DIV for each tile</li>
<li>Create BUTTONs for "Add to Cart" and "Add to Favorites"</li>
<li>Float the container DIVs and make them follow a fluid grid layout</li>
<li>Add an optional button to view a popup with additional details, but not as much as the main product page itself</li>
</ul>
<h3>Breakdown</h3>
<img src="images/tiles-sketch.jpg" alt="Shopping Tiles Breakdown"/>
<h4>Things to Consider</h4>
<ul>
<li>Font colors should be dependent on the button or division being used to create the parent element</li>
<li>Things could either be centered or stacked in miniature columns within each tile</li>
</ul>
<div>
<a href="demos/interactive-shopping-tiles.html"><button>View Demo</button></a>
</div>
</article>
</body>
</html>