SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
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 fit 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 filling 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 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.
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 flow 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
    difficult.


•   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
Design basics for the web
Red is a very hot colour.

fire, 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 signifies 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 final 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 basics for the web
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 &
    flyers. Think about what you like and why you like it.

Contenu connexe

Similaire à Design basics for the web

Use of colors in web and graphic design
Use of colors in web and graphic designUse of colors in web and graphic design
Use of colors in web and graphic designNida Aslam
 
Research theories complete 2019
Research theories complete 2019Research theories complete 2019
Research theories complete 2019Charlotte Oliver
 
Lesson 4 interactive media (1)
Lesson 4  interactive media (1)Lesson 4  interactive media (1)
Lesson 4 interactive media (1)hwells2101
 
0004 interior design elements
0004 interior design elements0004 interior design elements
0004 interior design elementssrmmrs2003
 
Best web color schemes for 2014
Best web color schemes for 2014Best web color schemes for 2014
Best web color schemes for 2014Christopher Dill
 
Colour in magazine
Colour in magazineColour in magazine
Colour in magazineMark Rowland
 
Scandinavian Design Principles
Scandinavian Design PrinciplesScandinavian Design Principles
Scandinavian Design PrinciplesKnowMore
 
Interior design by nunnicha
Interior design by nunnichaInterior design by nunnicha
Interior design by nunnichanunnichap
 
Practical Lecture 3_Graphics Elements and Principles.pdf
Practical Lecture 3_Graphics Elements and Principles.pdfPractical Lecture 3_Graphics Elements and Principles.pdf
Practical Lecture 3_Graphics Elements and Principles.pdfRAYMONDELIUD
 
What Color is Response? An Inside Look at How Color Improves Your Sales
What Color is Response? An Inside Look at How Color Improves Your SalesWhat Color is Response? An Inside Look at How Color Improves Your Sales
What Color is Response? An Inside Look at How Color Improves Your SalesVivastream
 
WDD Chapter 1 class pp notes
WDD Chapter 1 class pp notesWDD Chapter 1 class pp notes
WDD Chapter 1 class pp notescmurphysvhs
 
Importance of color in creation to the design
Importance of color in creation to the designImportance of color in creation to the design
Importance of color in creation to the designShwetaMalik22
 

Similaire à Design basics for the web (20)

Use of colors in web and graphic design
Use of colors in web and graphic designUse of colors in web and graphic design
Use of colors in web and graphic design
 
Research theories complete 2019
Research theories complete 2019Research theories complete 2019
Research theories complete 2019
 
Lesson 4 interactive media (1)
Lesson 4  interactive media (1)Lesson 4  interactive media (1)
Lesson 4 interactive media (1)
 
Theory complete
Theory completeTheory complete
Theory complete
 
5. pre production
5. pre production5. pre production
5. pre production
 
Color theory In UI
Color theory In UIColor theory In UI
Color theory In UI
 
0004 interior design elements
0004 interior design elements0004 interior design elements
0004 interior design elements
 
Graphic design for
Graphic design forGraphic design for
Graphic design for
 
5. pre production
5. pre production5. pre production
5. pre production
 
5. pre production
5. pre production5. pre production
5. pre production
 
Best web color schemes for 2014
Best web color schemes for 2014Best web color schemes for 2014
Best web color schemes for 2014
 
Colour in magazine
Colour in magazineColour in magazine
Colour in magazine
 
Scandinavian Design Principles
Scandinavian Design PrinciplesScandinavian Design Principles
Scandinavian Design Principles
 
Interior design by nunnicha
Interior design by nunnichaInterior design by nunnicha
Interior design by nunnicha
 
Basic interior design
Basic interior designBasic interior design
Basic interior design
 
Practical Lecture 3_Graphics Elements and Principles.pdf
Practical Lecture 3_Graphics Elements and Principles.pdfPractical Lecture 3_Graphics Elements and Principles.pdf
Practical Lecture 3_Graphics Elements and Principles.pdf
 
What Color is Response? An Inside Look at How Color Improves Your Sales
What Color is Response? An Inside Look at How Color Improves Your SalesWhat Color is Response? An Inside Look at How Color Improves Your Sales
What Color is Response? An Inside Look at How Color Improves Your Sales
 
WDD Chapter 1 class pp notes
WDD Chapter 1 class pp notesWDD Chapter 1 class pp notes
WDD Chapter 1 class pp notes
 
Importance of color in creation to the design
Importance of color in creation to the designImportance of color in creation to the design
Importance of color in creation to the design
 
10 tips on psychology color in web
10 tips on psychology color in web10 tips on psychology color in web
10 tips on psychology color in web
 

Dernier

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Dernier (20)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

Design basics for the web

  • 1. Creative Sound + Music CSM4 Designing a website Part 1
  • 2. • 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.
  • 3. Grids • The grid serves as the framework for page layout. • The text and images used on the page fit into place and align with one another according to the grid. • grids can help to achieve balance, spacing, and to compartmentalise the data.
  • 4. ! !
  • 5. 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
  • 6. 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 filling 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
  • 7. 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 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.
  • 8. 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.
  • 9. 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 flow to the user's eyes.
  • 10. 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 difficult. • 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/
  • 11. 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.
  • 12. 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
  • 14. Red is a very hot colour. fire, 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.
  • 15. 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.
  • 16. 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.
  • 17. new beginnings and growth. It also signifies 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.
  • 18. 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.
  • 19. 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.
  • 20. 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.
  • 21. 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.
  • 22. 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.
  • 23. 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 final impression a design gives when used with other colours.
  • 24. 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.
  • 25. 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/
  • 26. 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.
  • 27. 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.
  • 28. 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.
  • 30. 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 & flyers. Think about what you like and why you like it.