design3

Recommendations

Info

42 The Principles of Beautiful Web Design Frameworks After working with responsive web design for a while, we’ve begun to understand the process better and streamline it. We’ve started creating our own responsive frameworks and can target common elements that are found on most websites, setting up common structures that work well in most circumstances. This is great, because we no longer have to reinvent the wheel each time we design a new site. These frameworks are a workable base that we can use to create a consistent design across all devices, but that can equally be used to customize designs however we like to create beautiful, responsive websites. Many web development frameworks exist to help create beautiful, consistent, responsive websites, but there are two, in particular, that stand shoulder-to-shoulder in popularity and usefulness. Foundation 38 , shown in Figure 1.43, is a mobile framework by Zurb that’s packed with tons of web development features. Foundation seeks to simplify web development. It does this via a modular system featuring CSS classes that enable different features. With very little effort, Foundation enables you to create well-structured layouts. It also makes it relatively simple to implement a host of features including responsive navigation menus, image sliders, accordion menus, validated forms, buttons, model popups, panels, tooltips, progress bars, and responsive tables. Figure 1.43. The Foundation framework Bootstrap 39 , shown in Figure 1.44, is the other framework battling for the number one spot as the responsive framework of choice. Much like Foundation, Bootstrap has a number of its own builtin components that allow you to quickly create well-structured, mobile-first websites. Bootstrap has plenty of integrated features that are comparable to Foundation. With Bootstrap, you can create jumbotrons, panels, wells, navigation bars, progress bars, dropdowns, badges, alerts, tooltips, 38 http://foundation.zurb.com/ 39 http://getbootstrap.com/
Layout and Composition 43 popups, tabs, carousels, and much more. Bootstrap also integrates the use of glyphicons, which is an embedded font for use with the framework. Figure 1.44. The Bootstrap framework The primary reason people love Foundation and Bootstrap is that they’re highly customizable. You don’t have to download or even include the JavaScript files for components you aren’t using. Simply click the checkboxes corresponding to the components you need, and leave the ones you don’t. And once you’ve made your selections, Foundation and Bootstrap can compile them into custom downloads. They essentially take all the hard work out of compiling the components of your web development project. With developers keen to create the leanest websites possible, with the least amount of JavaScript, and the smallest file sizes, it’s easy to see why this approach is so popular. One issue that’s arisen with responsive web design is that traditional navigation menus don’t always work the same way they do on a mobile device as they do on a desktop screen; when there isn’t enough screen real estate things can become jumbled. The solution that’s been universally adopted is the mobile menu. It’s an icon of three lines stacked vertically, as shown in the top-right of the figure below, that represents an expandable menu, only available when the icon is tapped. The menu contents then appear as an overlay on top of the site’s content. Figure 1.45. A Foundation menu on a desktop screen The menu shown in Figure 1.45 is how the menu in Foundation looks on the desktop. On a mobile device, such as a phone or a tablet, the menu collapses, until you interact with it like in the examples shown in Figure 1.46.
Page 1:
Summary of Contents Preface . . . .
Page 4 and 5:
iv The Principles of Beautiful Web
Page 7 and 8: Table of Contents Preface . . . . .
Page 9 and 10: ix Color Scheme Designer 3 . . . .
Page 11: xi Creative Image Treatments . . .
Page 14 and 15: xiv bathroom with the work that we
Page 16 and 17: xvi Tips, Notes, and Warnings Hey,
Page 18 and 19: 2 The Principles of Beautiful Web D
Page 26 and 27: 10 The Principles of Beautiful Web
Page 65 and 66: 2 Chapter Color Whether you’re de
Page 67 and 68: Color 51 reason, it’s often used
Page 69 and 70: Color 53 Figure 2.5. Calming stones
Page 71 and 72: Color 55 Figure 2.7. These wind tur
Page 73 and 74: Color 57 Chromatic Value The measur
Page 75 and 76: Color 59 Figure 2.12. The tradition
Page 77 and 78: Color 61 thick that you’re unable
Page 79 and 80: Color 63 Another example of saturat
Page 81 and 82: Color 65 An Analogous Color Scheme
Page 83 and 84: Color 67 Figure 2.22. Blinksale’s
Page 85 and 86: Color 69 put off by the stark contr
Page 87 and 88: Color 71 Figure 2.27. Cross Cross C
Page 89 and 90: Color 73 Figure 2.30. The Bulls+Arr
Page 91 and 92: Color 75 Figure 2.34. The adventuro
Page 93 and 94: Color 77 Table 2.1. Counting from 1
Page 95 and 96: Color 79 Scheme Designer 3 works. U
Page 97 and 98: Color 81 Figure 2.39. Pictaculous C
Page 99 and 100: Color 83 Figure 2.41. A mood board
Page 101 and 102: 3 Chapter Texture There are many we
Page 103 and 104: Texture 87 Figure 3.2. The A-Team b
Page 105 and 106: Texture 89 Figure 3.5. Geometric an
Page 107 and 108: Texture 91 Rounded Corners So we’
Page 109 and 110:
Texture 93 Figure 3.10. Ithaca Even
Page 111 and 112:
Texture 95 Figure 3.12. Speed Kids
Page 113 and 114:
Texture 97 Figure 3.14. Perspective
Page 115 and 116:
Texture 99 Figure 3.17. A clear and
Page 117 and 118:
Texture 101 Although repetitious ba
Page 119 and 120:
Texture 103 declaration background-
Page 121 and 122:
Texture 105 Figure 3.25. Three repe
Page 123 and 124:
Texture 107 Figure 3.27. Team Fanny
Page 125 and 126:
Texture 109 said, just because you
Page 127 and 128:
Texture 111 This site certainly fal
Page 129 and 130:
Texture 113 Another notable example
Page 131 and 132:
Texture 115 Figure 3.36. Minimalism
Page 133:
Texture 117 Figure 3.38. The site d
Page 136 and 137:
120 The Principles of Beautiful Web
Page 138 and 139:
Page 140 and 141:
Page 142 and 143:
Page 144 and 145:
Page 146 and 147:
Page 148 and 149:
Page 150 and 151:
Page 152 and 153:
Page 154 and 155:
Page 156 and 157:
Page 158 and 159:
Page 160 and 161:
Page 162 and 163:
Page 164 and 165:
Page 166 and 167:
Page 168 and 169:
Page 170 and 171:
Page 172 and 173:
Page 174 and 175:
Page 176 and 177:
Page 178 and 179:
Page 180 and 181:
Page 182 and 183:
Page 184 and 185:
Page 186 and 187:
Page 188 and 189:
Page 190 and 191:
Page 192 and 193:
Page 194 and 195:
Page 196 and 197:
Page 198 and 199:
Page 200 and 201:
Page 202 and 203:
Page 204 and 205:
Page 206:
show all

design3

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?