Art That Is Visually Pleasing as Well as Functional

How to design a good-looking website

1. Keep your design balanced.
2. Compartmentalize your pattern by using grids.
3. Pick 2 or 3 base colors at most for your design.
4. Try to make the graphics become well together.
5. Improve your website'southward typography.
6. Make elements stand out by calculation white space around them.
7. Have all elements connected.

Everyone and their grandfather (and dog) seems to have made a website these days. The Web is getting more than crowded by the twenty-four hours, with literally dozens of websites being added every bit you lot read this commodity. It is becoming harder and harder to get noticed amongst the masses.

"Fortunately" for us designers, not everyone seems to understand what makes or breaks a Web pattern. Granted, Web design is to a large extent a artistic process and can therefore be chosen more than fine art than scientific discipline. But considering it is intrinsically a medium of presentation, some rules (or at least principles) apply. By following some simple pointers, anyone should be able to create a visually pleasing design and take one step closer to fame. Okay, it's not that simple, and talent and experience do matter, only anyone can turn their home folio into something prettier within mere minutes.

And then what makes something pretty? Information technology is not Flash. Non to say that Flash has no merit, merely Wink solitary doesn't make a blueprint skillful; some nasty Wink websites are out at that place. Also, one doesn't have to exist a dandy illustrator to make appealing designs. Instead, look at Spider web design equally a symbiosis of unlike elements. No unmarried element counts the most; rather, the sum of the elements makes a pattern look good.

1. Keep your design balanced.

Balance is all virtually ensuring that your pattern does not tip to one side or the other. It is like the residue of weight in achieving symmetry or disproportion.

Look at the dog in the header graphic of Khoi Vinh's Subtraction website below. I took this example from The Principles of Cute Web Blueprint past Jason Beaird. Jason points out how the cantankerous to the right makes up for the added visual weight that the dog provides on the left. Information technology is a small-scale but non insignificant detail. Encounter for yourself by hiding the cantankerous with your mitt.

This is what we call asymmetrical remainder, and this is what residual is about. If you're not conscientious about how you lot lay things out, the design volition become unbalanced rather quickly. You can manipulate the visual weight of a design in many ways, such as with color, size and the addition or removal of elements. If yous were to make the cantankerous, say, a vibrant orange, it would get heavier and peradventure throw the layout off balance over again. Achieving asymmetrical balance is an especially fragile matter that takes time to fine-tune and a somewhat trained eye to really pull off.

Here below is another instance of symmetrical balance, this one by The Showtime Xx. Although the header graphic is asymmetrically balanced (can you spot how information technology's done?), the rest of the design lower downwardly has symmetrical columns. Asymmetrical balance might be harder to pull off, just it tends to make a design more than playful.

You will find that every design you think looks skillful has a well-synthetic remainder underlying it. And every design featured hither scores high on each of the seven principles we talk over. So take a minute to scroll up and downwardly and run across for yourself if they all pass muster.

2. Compartmentalize your pattern by using grids.

The concept of grids is closely related to that of balance. Grids are a series of horizontal and vertical rulers that help you lot "compartmentalize" a design. Recollect of columns. Columns improve readability, making a page's content easier to absorb. Spacing and the use of the Dominion of Thirds (or like Golden Ratio) make everything easier on the center.

The Rule of Thirds and Gold Ratio account for why sidebars, for instance, are usually well-nigh a third of the width of the page and why the principal content area is roughly equal to the design's width divided by i.62 (equalling phi in mathematics). We won't get into why this is, merely information technology does seem to concord true in practice. Information technology is besides why the subject in professionally taken photographs is usually positioned not in the middle simply at the intersection of an imaginary nine-foursquare grid (iii by three, with two horizontal and two vertical lines).

The grid lends itself peculiarly well to minimalist designs. v 30 One by Derek Punsalan shows why:

While the design is not visually impressive in itself, the clear strict structuring of elements makes it piece of cake on the eye. The left column is roughly twice the size of the right sidebar, which just makes sense and is something to think well-nigh when creating your own designs.

3. Pick two or three base colors at nearly for your design.

What if you changed the base ruby on the The Beginning Twenty website (above) to lime green? Would it expect adept? Well-nigh likely not. Because it does non vest to the same colour palette (and of course lime green isn't the easiest color to work with). Websites such as ColourLovers be for a reason. You lot can't but choice your colors Rambo-style, guns blazing. Some colors go well together, others don't. A lot of theories on colors and their combinations exist, including conventions on monochrome and contrasting schemes, but a lot comes down to common sense and having a feel for information technology.

Detect out for yourself what works together. Soak up as many website designs as possible, such equally those featured on whatsoever of the many CSS showcase websites (like Best Web Gallery), to become a feel for how colors interact with each other. Pick two or three base of operations colors at almost for your design, so apply tints (which are lighter, mixed with white) and shades (which are darker, mixed with black) of these base of operations colors to aggrandize the palette where necessary.

Picking prissy colors is as of import every bit picking the right colors (that is, the right colors for the job). A Web pattern for a cozy little eatery would practise well with "bawdy" tones: reds, browns, etc. Of course, at that place is no such thing equally a surefire recipe. Every color sends out a message, and it is up to you to get the message right.

Bence Kucsan' website has a color scheme style of his own. It'south mainly monochromatic (tints and shades of a single color) and achromatic (blackness and white) with a color (red) to stand out:

The black and white conveys chic and professional, while the cherry adds the spice that makes sure elements stand up out and keeps the design from looking dull; of class, more only red makes this design interesting. By the fashion, one visitor in detail popularized this manner.

Speaking of color, WebDesigner Wall by Nick La is pure bliss:

All of those soft pastels make this blueprint shine. At first glance, the colour choices may look somewhat capricious, only when yous look closely you notice a strictly divers color palette, which is necessary to ensure that all of the elements get forth well. The website, and particularly its background, also demonstrates a good combination of colors and graphics, which brings us to number iv…

4. Endeavour to brand the graphics go well together.

Okay, bang-up design doesn't need fancy graphics. Merely poor graphics volition definitely injure a design. Graphics add to the visual message. Websites similar WebDesigner Wall have impressive illustrations, while others are understated.

Tim van Damme uses only a handful of graphics on his website Max Voltar, but he implements them with the greatest thought and care. A non-intrusive groundwork prototype and a sophisticated crown are 2 of the graphics. Visually, they are not overly impressive, but they all add to the wait and feel of the website, and nowhere is one out of identify.

For some fourth dimension now, Max Voltar has had a unlike design than the one shown above. Simply for the ii months that this one was online, it was easily 1 of my favorites. Because of this and considering its use of graphics is so exemplary, I picked it over the latest version.

Rogie Rex'due south Komodo Media is a lot more graphics-heavy, perfectly executed from both a technical and thematic standpoint.

You may not exist a not bad illustrator or photographer, but that doesn't mean yous can't put great graphics on your website. Some bones Photoshop skill, mayhap some stock images and peachy gustatory modality are all you need. Try to make the graphics go well together, and make certain they embody the style you are aiming for. We are non all gifted with the same natural ability, though. You lot can pick upward some things past learning from others, but sometimes you just take to pick the style that suits you lot best (similar a clean mode if y'all are non the greatest of illustrators).

v. Improve your website'due south typography.

The art of type is a tricky bailiwick to talk about considering it encompasses so many elements. While it can be regarded as a co-operative of design, i tin spend a lifetime mastering all of its aspects. This is not the place to provide a complete typographic reference, so we will limit our word to what volition benefit you in the short term.

Spider web typography is handicapped compared to print typography. The biggest difference is our lack of complete command over the advent of type on the Web, due to its dynamic character. Evidently, dynamic rendering has its strengths, merely Spider web designers take picayune control over the results, at to the lowest degree for now. Missing fonts on the user'south computer, differences in browser and platform rendering, and generally subpar support in CSS brand Web typography a daunting if non frustrating chore. But while we may have to wait for CSS 3 for Web typography to reach its full potential, we take the means now to brand information technology look interesting and, more importantly, pretty.

Font Stacks

At that place are several adequately easy ways to significantly better your website's typography, three of which we'll cover hither. Ane of them is font stacks.

Font stacks are just basic CSS. They let you ascertain the order in which fonts should be rendered. To be precise, we are speaking of typefaces here, not fonts. For a expert summary on this, delight refer to Jon Tan's Typeface != Font.

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

The holding above will give the body copy the typeface of "Helvetica Neue." This, however, requires that the user'southward figurer has that detail typeface installed. Macs present come with Helvetica (Neue) pre-installed, merely most Windows machines don't.

The beauty of font stacks is that you can ascertain "fallbacks," meaning that whenever a defined typeface is missing, the browser simply looks for the next one in line. Of form, this means the pattern will non await exactly the same for everyone, and equally such nosotros lose some control even so again. But for those who do not desire to resort to another solution (such as epitome replacement), this is the best that pure CSS offers at the moment (until the day we tin comfortably use @font-confront).

Wilson Miner uses the font stack we cited to a higher place. Helvetica Neue is an improvement of Helvetica. And while Arial is installed on almost every computer (at to the lowest degree on Windows and Mac machines) and therefore a pop pick for the Spider web, most designers prefer Helvetica to Arial. This way, yous get the best of both worlds: Helvetica for those who have it and Arial in instance Helvetica is unavailable.

Jon Tan uses some other interesting font stack for his headings:

trunk { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }

Only a relatively small-scale number of visitors will see the headers in Baskerville, but that is not a problem. Information technology gives the design an extra bit of character while not pain anyone who doesn't have information technology. Once more, font stacks are not a perfect solution, but they exercise give you an advantage.

Measure and Leading

Measure out is the length of lines, and leading is the height (or vertical spacing) of lines. In CSS, measure can be controlled by defining a width for the containing box (e.g. the paragraph element). Both affect readability. If the lines are too short or besides long, users won't exist comfy reading the content; i frequently sees this problem with fluid layouts. Between 40 and eighty characters per line seems platonic.

Leading can be increased (or decreased, if you really desire to) by defining the line-meridian CSS property. More often than not, a line height of 1.v works well for paragraphs. This ways that when the size of the text is 12 points, the meridian of the line becomes eighteen points (12 × one.5), which gives the text some breathing room.

Hanging Quotes and Bullets

A third fashion to improve readability is with hanging quotes and bullets. Rather than leave the text of bulleted lists and quotes with the default alignment, horizontally marshal it with the residual of the text on the page.

Tim van Damme uses hanging bullets for his latest redesign of Max Voltar:

We have added the red line to emphasize how all of the text has been horizontally aligned. By simply setting the padding-left CSS belongings of the bulleted listing to 0, you can achieve the same event.

Pulling off hanging quotes, on the other manus, is not as straightforward. Most designers resort to a groundwork image for quotation marks and and so marshal accordingly, as done by Matthew Buchanan:

The hanging quotation mark hither does not disrupt the flow of text. It'south a detail not oft attended to only well worth the investment.

Print Rules That Do Non Apply

Print and Web are not the aforementioned. That seems pretty obvious, but a lot of people treat them equally if they were the same. Print is stock-still, and the Web is dynamic. Having complete control over how your Web pattern volition look for everyone is impossible.

Vertical rhythm, proper justified text (with hyphenation and without rivers) and multi-column layouts are just a few of the features of print that are (almost) incommunicable on the Web. Thus, we have a lot to expect forrad to with CSS 3. CSS 3 will probably not be, however, a be-all and end-all solution, and it volition likely be another few years before nosotros can fully take advantage of it. We simply have to take these differences for now: don't look at the Web as an online version of impress; rather, utilise the intrinsic potential of the Web to its fullest.

A Word About Image Replacement

What about epitome replacement (the technique of replacing fonts with images)? Nosotros've talked about font stacks, merely aren't they inferior to epitome replacement? Well, that depends on what you think is more important: being able to display the exact font you want or having dynamic, attainable and SEO-friendly content? Certain image replacement techniques have gotten pretty avant-garde, just they still aren't every bit flexible as manifestly text. Image replacement lends itself well to headers and excerpts, only it is hardly a solution for body text.

6. Brand elements stand out by adding white space around them.

White space, or negative space, has to do with what is not there. Similar measure and leading, white space gives text some animate room and spatial peace. Yous can make elements stand out past adding white space around them. Copy, for example, shouldn't await cramped. To ensure readability, make sure paragraphs have sufficient padding.

Perfume ads — or any advertisement for a luxury production for that matter — are known for their apply of white infinite… loads of it; and a serif typeface for good measure out.

I suppose it's time for a shameless plug. The screenshot higher up is of my own website Shift (px). The design relies heavily on typography and white space. White space probably takes upward about fifty% of the page. White space is 1 of the easiest (because yous aren't actually calculation anything, are you?) and most effective ways to create a visually pleasing and readable design.

White infinite adds a lot of class to a design. Don't be agape to leave some holes open, even gaping ones. Inexperienced designers are tempted to put something in every footling corner. Design is about communicating a message. Design elements, therefore, should support this message, not add noise to information technology.

Some other good example of plenty of white space:

Kyle Meyer's Astheria shows that not much is needed for a pleasing design. Some people may misfile "minimalist" with "simple." But pulling off such a manner is neither simple nor easy (even if one does not have to be peachy with graphics or illustrations).

seven. Accept all elements connected.

"Connection" is a bit of a made-upwardly term here, but information technology seems to be the best one for what we mean. Connection here refers to a Web pattern that has both unity and consistency. These ii attributes demonstrate the profesionalism of a blueprint (and thus its designer). They are very wide attributes. A design should be consistent in its use of colors, in its range of fonts, with its icons, etc. All of these aspects count; a design can wait bully and still endure from inconsistencies.

When a design is inconsistent, its unity can exist lost on the user. Unity is slightly different from consistency. Unity refers to how the different elements in a blueprint collaborate and fit together. For instance, do the colors and graphics match? Does everything contribute to 1 unified bulletin? Consistency, on the other hand, is found between the pages of a pattern.

Unity is possibly the more important of the ii. Without unity, having a good design is hard. Inconsistency, however, may look a chip "sloppy" but may not brand the design "bad."

Of the 7 principles addressed in this article, connectedness is the most important. Connection has to do with how all elements come together: balance, grid, colors, graphics, type and white space. It is sort of the glue that binds everything together. Without this glue, the design falls apart. You could accept pretty type and a brilliant and meticulously chosen color palette, but if the graphics are awful or just don't match or if everything is crammed together without thought, the design volition fail.

This is the hardest part of designing. Information technology is not something that can be easily taught or necessarily be taught at all. A petty natural ability and feel is required. But it is what information technology is, and information technology makes a design look skillful in the end.

We praised Nick La's WebDesigner Wall earlier because of its lovely graphics, but it is as well a proficient example of connection. When you look closely at the graphics and the manner in general, everything has a hand-drawn watercolor look to it: the articles' images, the watercolored background images, the hand-drawn doodles and icons, the styling of the poll, and so on. The attention to detail makes this blueprint excel.

Further Resources

• HTML Basics for Beginners: How to create a website using HTML
• 5 Simple Steps to Designing Grid Systems: A beginner's guide to grids.
• The Golden Ratio in Web Design
• viii Uncomplicated Means to Improve Typography in Your Designs
• Fonts and the Web: About the state of fonts on the Web and image replacement.
• iv Principles of Skilful Design for Websites: Four other principles, more from a practical standpoint.

An additional resources
If y'all are new to web design, our guide on how to make a website is going to atomic number 82 you all the fashion from the very kickoff.

Conclusion

Good Web design is not limited to the seven key principles discussed here. Aspects such as accessibility, readability and usability play a part, also.

This is the reason why Spider web design is then hard. Getting your feet moisture in design is easy, especially today, with so many content direction systems, blogging tools and themes readily bachelor. But truly mastering all of the facets of Web design takes time and, let's be honest, talent. Having the ability to craft pretty designs is just one facet, but an important one.

This article is originally published on Oct 15, 2009, and updated on May 11, 2021.

parryanstating.blogspot.com

Source: https://www.jotform.com/blog/how-to-make-a-web-design-look-good/