Supplementary Materials https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky problems. (Location 354)
comp is an image of a layout that’s created before we begin to prototype the design in HTML. (Location 378)
Computers have screens, and people tend to stare at them, which isn’t conducive to a good meeting or to note taking. (Location 388)
you start thinking about the layout in front of a computer. If you start out on paper, you can ignore the technical limitations of browsers and CSS, (Location 448)
Secondary navigation, search fields, and outgoing links should not be dominant features of the page. If we make these items easy to find, and separate them visually from the content, we allow users to focus on the information—while they’ll still know where to look when they’re ready to move on to other content. (Location 490)
A simplified version of the golden ratio is the rule of thirds. A line bisected by the golden ratio is divided into two sections, one of which is approximately twice the size of the other. Dividing a composition into thirds is an easy way to apply divine proportion without your calculator. (Location 571)
Wireframes are simple sketches or layouts where you design blocks of content and their positioning on the page. (Location 578)
Most modern CSS frameworks are based on a 12-column grid, mostly because of the variety of column widths it offers, (Location 590)
I usually start designing on a 12-column sketch sheet to make it easy to transition from my sketches and mockups to an actual working prototype. (Location 594)
A layout that “doesn’t look quite right” can often be fixed by moving elements and resizing them on the grid. (Location 614)
There are two main forms of visual balance: symmetrical and asymmetrical. (Location 621)
Symmetrical balance, or formal balance, occurs when the elements of a composition are the same on either side of an axis line, (Location 623)
Rather than mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. (Location 642)
This is generally the way balance works. It’s as if the entire composition is in a picture frame hanging by a single nail on the wall. (Location 653)
Unlike symmetrical balance, asymmetrical balance is versatile and, as such, is used more often on the Web. (Location 656)
Design theory describes unity as the way in which the different elements of a composition interact with one another. A unified layout is one that works as a whole rather than being identified as separate pieces. (Location 675)
Proximity is an obvious, but often overlooked, way to make a group of objects feel like a single unit. Placing objects close together within a layout creates a focal point towards which the eye will gravitate. (Location 682)
Awwwards38 is a thoughtfully curated gallery of new site and app designs supported by an active and knowledgable community. (Location 700)
One of the most useful tips my first graphic design professor taught me was to create a morgue file whenever I was collecting inspiration for a large project (Location 711)
Responsive design uses CSS to control which rules are applied based on the screen size of the device displaying it. One way of doing this is with media queries. (Location 765)
so if you want to go deep on the technical aspects, here’s your reading list: the seminal “Responsive Web Design”45 article by Ethan Marcotte Jump Start Responsive Web Design, 2nd Edition46 by Chris Ward Responsive Design 47 by John Rhea However, let’s next look at the pure design considerations of responsive web design. (Location 774)
Always Design for “Mobile First” (Location 780)
SVG Is Your BFF (Location 799)
Foundation50, shown below, is a mobile framework by Zurb that’s packed with tons of web development features. (Location 813)
Bootstrap51, shown below, is the other framework battling for the number-one spot as the responsive framework of choice. (Location 819)
Bootstrap has a number of its own built-in components that allow you to quickly create well-structured, mobile-first websites. (Location 820)
This is perfect for creating the kind of generic interface units you need for wireframe designs. It’s true that there are many good specialist wireframing tools such as Balsamiq,55 Moqups56 and HotGloo57 (Location 880)
Wireframes The 12-column layout has been the default desktop configuration for more than a decade. (Location 885)
Color psychology is a field of study that’s devoted to analyzing the emotional and behavioral effects produced by colors and color combinations. (Location 924)
Red The color red has a reputation for stimulating adrenaline and blood pressure, and is also known to increase human metabolism. (Location 938)
Like red, orange is an active and energetic color, although it doesn’t evoke passion in the way red can. Orange is thought to promote happiness, (Location 944)
Whether true or not, the point is that too much yellow can be overpowering. (Location 958)
Green is most commonly associated with nature. It’s a soothing color that symbolizes growth, freshness, and hope. (Location 961)
blue symbolizes openness, intelligence, and faith, and has been found to have calming effects. On the other hand, blue has also has been found to reduce appetite. (Location 969)
To this day, purple still evokes wealth and extravagance. That extravagance is carried over into nature. Purple is most often connected with flowers, gemstones, and wine. It balances the stimulation of red and the calming effects of blue. (Location 983)
Black, a color that represents power, elegance, and in this case, exorbitance Color (Location 1008)
When placed near a cool color, a warm color will tend to pop out, dominate, and produce the visual emphasis (Location 1018)
Cool colors are the colors from green to blue, and can include some shades of violet. (Location 1020)
There’s no way of producing black combining just cyan, magenta, and yellow. This is why they’re always supplemented with black—the K in CMYK. (Location 1053)
using red, yellow, and blue as the primary colors. The color wheel is a simple but effective diagram developed to present the concepts and terminology of color theory. (Location 1061)
The primary colors of the traditional color wheel are red, yellow, and blue. (Location 1071)
Secondary colors By mixing two primary colors, we create secondary colors, (Location 1073)
There’s a total of six tertiary colors: vermilion (red-orange), marigold (yellow-orange), chartreuse (yellow-green), aquamarine (blue-green), violet (blue-purple), and magenta (red-purple). As you might already have guessed, mixing a primary color with an adjacent secondary color forms a tertiary color. (Location 1075)
Six classic color schemes exist: monochromatic analogous complementary split complementary triadic (Location 1111)
A monochromatic color scheme—like the one below—consists of a single base color and any number of tints or shades of that color. (Location 1120)
An analogous color scheme consists of colors that are adjacent to one another on the color wheel. (Location 1145)
Complementary color schemes like the one featured in our updated hoity-toity illustration—shown below—consist of colors that are located opposite each other on the color wheel. (Location 1163)
Another common pitfall is to choose colors that aren’t directly opposite one another on the color wheel, yet aren’t close enough to be analogous colors. These combinations are known as discordants because the colors will often clash with one another, causing viewer discord. (Location 1194)
To create a split-complementary color scheme, use the two colors adjacent to your base color’s complement. (Location 1212)
A color scheme will only give you two, three, or four colors to work with. Although a limited palette can be beautiful, you’re probably going to need a few more colors to design your website. (Location 1253)
six additional digits: A (which is the equivalent of decimal 10), B (11), C (12), D (13), E (14), and F (15). (Location 1274)
What I didn’t mention was that there are 256 different levels of red light, 256 levels of green light, and 256 levels of blue light. We can use these to create 16,777,216 distinct colors. (Location 1276)
A hexadecimal color code specifies the levels of red, green, and blue that go into a given color. For example, combining red, green, and blue at their highest possible values makes white. To use white in a web page, we set its red component to 255 ( FF in hexadecimal), its green component to 255 ( FF ), and its blue component to 255 ( FF ). (Location 1279)
Once you think you’ve reached that Jedi Hex-Master status, head over to Yizzle.com, 14 for a little game of “What the Hex?” (Location 1285)
Paletton Although there are many online color pickers out there, my overall favorite is Paletton15 (formerly known as Color Scheme Designer), (Location 1291)
If the idea of sharing color resources with a like-minded community appeals to you, the COLOURlovers18 website (shown below) is probably your jam. (Location 1311)
The W3C’s Web Content Accessibility Guidelines (WCAG 2.1https://www.w3.org/WAI/WCAG21/ Techniques/general/G183″) have determined that a contrast ratio is 4.5:1 for most body text and 3:1 for larger text provides enough contrast for the majority of users. (Location 1320)
Personally I prefer to use a browser extensions for this task. Alex Clapperton’s Colour Contrast Checker19 (Location 1323)
CSS lets us declare variables we can use across the site. Your variable name must begin with two dashes, and you should name it after what it does, not its current color. (Location 1339)
Texture is anything that gives a distinctive appearance or feel to the surface of a design or object. When you put your hands on a brick wall, a wooden beam, or a wet bar of soap, what do you feel? Can you make a website “feel” like one of these surfaces? (Location 1396)
the elements of graphic design: point, line, shape, volume and depth, and pattern. (Location 1403)
The line is the most common element of graphic design, and is among the most expressive. (Location 1421)
a website’s development, try to keep in mind that lines are far more useful than just being dividers, borders, and stripes. (Location 1439)
Some designers have created amazing artwork without images, using pure CSS. The image below shows off the amazing animation work of Agathe Cocco7. (Location 1514)
It turns out that humans are very good at noticing what other people are looking at. We’re naturally nosey creatures and want to know what others find interesting. (Location 1539)
Pattern has long been used to add richness and visual interest to all types of design. (Location 1651)
http://obys.agency/ (Location 1775)
Let’s face it: the core purpose of all web design is communication. (Location 1874)
Typography literally means making impressions with writing. (Location 1894)
http://webtypography.net/ 2. https://practicaltypography.com/what-is-typography.html (Location 1912)
Fortunately, the font-family property of CSS allows you to choose multiple fonts in order of preference. This is referred to as a font stack. If the first font is unavailable, the second font will be used; (Location 1925)
add what the W3C calls a generic font family. The generic font families are serif , sans-serif , cursive (similar to script or hand lettering), fantasy (or novelty), and monospace (Location 1932)
.class { font-family: ‘Calisto MT’, Georgia, ‘Times New Roman’, serif; (Location 1934)
Any font family names that include spaces should be quoted, either using single ( ‘ ) or double ( ” ) quotes (Location 1936)
As with many of their services, Google have slowly but surely become the default choice for hosted web fonts. (Location 1964)
Typekit was the original hosted font solution, developed by Jeffrey Veen and Jason Santa Maria and now owned and operated by Adobe. (Location 1968)
Hoefler & Co. is a New York type foundry founded and run by rock star type designer Jonathan Hoefler. (Location 1972)