Design basics for the web

Creative Sound + Music CSM4 Designing a website Part 1

• Basic elements of visual communication are form, content, arrangement, light, and color. • On the web, success is often measured by how quickly and effectively you communicate your ideas to the user. • Be willing to experiment. Be willing to throw it away, and start again.

Grids • The grid serves as the framework for page layout. • The text and images used on the page ﬁt into place and align with one another according to the grid. • grids can help to achieve balance, spacing, and to compartmentalise the data.

A typographic grid composed of a Grids on the web series of interesecting vertical and http://Frieze.com horizontal axis http://www.guardian.co.uk http://www.markboulton.co.uk/ http://grid.mindplay.dk

Whitespace • “Whitespace,” or “negative space” is the space between elements in a composition. • White space should not be considered merely 'blank' space - it is an important element of design which enables the objects in it to exist. • The balance between positive (or none-white) and the use of negative spaces is key to aesthetic composition. • White space is extravagance. White space is the surface of the paper on which you are printing showing through and on which you are choosing NOT to print (or the space of a screen you’re not ﬁlling with pixels) • A page crammed full of text or graphics with very little white space runs the risk of appearing busy, cluttered, and is typically difficult to read. • Clever use of white space can give a page a classic, elegant, or rich appearance. For example, upscale brands often use ad layouts with little text and a lot of white space. Inexpert use of white space can make a page appear incomplete

Thinking about Whitespace • A page crammed full of text or graphics with very little white space runs the risk of appearing busy, cluttered, and is typically difﬁcult to read. • Clever use of white space can give a page a classic, elegant, or rich appearance. For example, upscale brands often use ad layouts with little text and a lot of white space.

Colour • Colour is very important in web design, and can be used to add spice to your website, relay the mood of a page, as well as to emphasise sections of a site. • as soon as you look at a website, you can normally guess within seconds what that site is all about. • Visitors may be quick to judge a website by its colour scheme and style of design.

Use colour to emphasise important sections of your website • You can make compositional choices in order to guide the viewer's eye to important components within your work. • Try to imagine that your website is an art composition, in other words, that you will design your website's page elements in a fashion that presents a pleasing ﬂow to the user's eyes.

• Most of us ʻknowʼ what a well designed website looks like, it is just getting from a blank screen to a good looking website that is difﬁcult. • Colours used within graphics, backgrounds, & page elements are meant to enhance the look of the page, not to take over the page • Just beware of over usage of graphics and images and you will be at least one step towards a well designed website. • Nobody wants to stay and linger on a site that is badly designed. • http://csszengarden.com/

• Stay consistent with your colour scheme throughout your site • If you use colours that are completely different on every page, how will your visitors know that they are still on your website? • A consistent and steady usage of colours will allow web surfers to feel more at ease and in control of their navigation. • To get your visitors to recognise your website, having a consistent look and feel is important.

The colour wheel Primary Colours:the three basic colours (red, yellow and blue) that cannot be mixed from other colours but can be used to mix all the other hues Secondary Colours: are a mixture of two primary colours TERTIARY COLORS: Yellow-orange, red-orange, red- purple, blue-purple, blue-green and yellow-green. These are the colors formed by mixing a primary and a secondary color. Complementary Colours:Two colours on opposite sides of the colour wheel, which when placed next to each other make both appear brighter. Analogous Colours: are a palette of compatible colour combinations that blend well together. They are neighbours on the colour wheel Hue:is the name of a distinct colour of the spectrum—red, green, yellow, orange, blue, and so on. It is the particular wavelength frequency Tint: is the mixture of a colour with white Shade: is a mixture of a colour and black

Red is a very hot colour. ﬁre, violence, and warfare love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too. Red can be associated with anger, but is also associated with importance Red also indicates danger in nature In different cultures, red has different associations. In design, red can be a powerful accent colour. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great colour to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.

Orange is a very vibrant and energetic colour. earthy and autumnal. orange can represent change and movement in general. Fruit - it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.

energising It’s associated with happiness and sunshine. Yellow is also associated with hope Yellow is also associated with danger, though not as strongly as red. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a colour for merchants. In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral colour for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.

new beginnings and growth. It also signiﬁes renewal and abundance. Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonising effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energising and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.

calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energising and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.

a combination of red and blue, and takes on some attributes of both. associated with creativity and imagination Dark purples can give a sense wealth and luxury or royalty. Light purples are softer and are associated with spring and romance.

The strongest of the neutral colours. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, the occult and mystery. Black can be ‘edgy’ as well as very elegant. It can be either conservative or modern, traditional or unconventional, depending on the colours it’s combined with. Commonly used for typography and other functional parts, due to it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.

Like black, it can work well with just about any other colour. Often associated with purity, cleanliness, minimalism and virtue. A neutral backdrop that lets other colours in a design have a larger voice.

Light greys can be used in place of white in some designs, and dark greys can be used in place of black. Grey is generally conservative and formal, but can also be modern. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated colour. Pure greys are shades of black, though other greys may have blue or brown hues mixed in.

earth, wood, and stone. natural colour and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull. It helps bring a feeling of warmth and wholesomeness. As beige - will take on the characteristics of colours around it, meaning it has little effect in itself on the ﬁnal impression a design gives when used with other colours.

Ivory is a calm colour, with some of the pureness associated with white, though it’s a bit warmer. Ivory can lend a sense of elegance and calm to a site. When combined with earthy colours it can take on an earthy quality. Can also be used to lighten darker colours, without the stark contrast of using white.

Colour links • http://www.colourlovers.com/ • http://kuler.adobe.com/ • http://www.wellstyled.com/tools/colorscheme2/index-en.html • http://www.colorspire.com/color/wheel/ • http://www.colorspire.com/color-schemes/creator/ • http://colorblender.com/

Wireframes Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of re- jigging a complex design later. Using wireframes is a great way to begin a web site project, as it allows you to focus on layout without the distraction of colour, type and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs.

Benefits of Wire-framing With website wireframes, you have the benefit of tweaking a simple line drawing to achieve the desired layout. Rather than move complex elements around a page, it can take very little time to drag a couple of boxes into new positions. It is also much more productive for you to focus on the layout Rather than worry about aesthetic specifics at this stage., you will be able to begin designing with a finalised layout and structure on which to base your design.

What to include All of the important elements of a web page should be represented in your website wireframe. Use simple shapes instead of actual graphics, and label them. These elements include (see following image) • Navigation: Buttons for users to visit the main sections of your site. • logo / Title • Content areas: Where will your different sections of content appear? • Wrapper or Container: imagine this acts as an invisible page in a magazine (you may still want to include a ‘wallpaper’ in the background behind the wrapper that fills up the browser window. • Header: This area at the top of your site is usually the first thing your visitor will see, think about including a title, logo or relevant image / graphic and possibly a tagline or caption to help introduce visitors to your site. • Menu / Navigation: Conventionally, a websites’ main navigation is displayed either horizontally along the top of pages near the header or vertically down the left of right-hand sides of the pages. This first stage of navigation should take your users to the most important areas of your site. Be as clear and guiding as possible so that new visitors can easily find what they’re looking for. • Main content area: Where the real guts of your website reside. This is a container to hold the actual content of your website. This may be divided into a number of columns (usually 2 or 3) with each colum providing a specific type of content. A common convention is that a wider section contains page-specific content and a sidebar includes other relevant information to the page or section a visitor is in. Usually referred to as a sub-menu or secondary navigation. • Footer: The area at the bottom of web pages to compliment the header. It is common to include any legal content, navigation that mirrors the header that go to the most important parts of the site. You may wish to put links to relevant social network sites here.

Design Summary • Good design does not occur suddenly or without work. It is an evolution of successes and failures. • Your style will develop over time. It grows from experience, from practice, from trial and error, and from observation. • The way you solve problems is your style. Believe in it. • Write all your ideas down. Take photos, draw. • Look around you. visit museums and galleries, notice posters & ﬂyers. Think about what you like and why you like it.

Design basics for the web

by Nic Finch

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 12

Statistics

Design basics for the web Presentation Transcript