Tag Archives: Web Design

C1 – Design Simple Webpage Layouts – Week 08

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 3     Week 4      Week 5     Week 6      Week 7    Link to this Unit on MyKangan

Today’s Class

  • Assessment – Website
    • Step 4 – Create the Website
  • Dreamweaver
  • Feedback

Assessment Website

Step 4 – Create the Website

Create the website in Dreamweaver (or any other Code editor) using HTML, CSS and if necessary JavaScript or JQuery.

  • Your website needs to have a well-designed layout.
  • 4 Web Pages:
    1. Home Page
    2. About us and Contact
    3. Gallery or Portfolio of Work
    4. Bookings or Purchase Requests

Dreamweaver

We will continue using divs (Read up on Divs on W3School) and complete a website in class.

Attend class to learn about how to set up your website in Dreamweaver. You will learn how to create divs, place images, create an interactive menu and more.

How to create an interactive menu:

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 07

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Assessment – Website
    • Four Web Pages
    • Step 1 Brainstorm Ideas
    • Step 2 Research Content
    • Step 3 Storyboard
    • Step 4 – Create the Website
  • Design and Layout
    • Guide to Good Web Design
  • Dreamweaver
  • Feedback

Assessment Website

Today we will commence on your assessment for this class. You will need to design a website for a client to promote his work or services. See examples below as a result of an in-class brain storm:

  • Portfolio of a designer, web-designer, graphic designer, fashion designer, …
  • Portfolio of an artist or illustrator
  • Portfolio of a photographer
  • Website for a horse trainer
  • Website for a singer
  • Website for a humanitarian organisation, eg Doctors Without Borders
  • Website for a restaurant

Four Web Pages

You will need to create 4 web pages using Dreamweaver or a WYSIWYG (What you see is what you get) code editor. These are the pages for you to create:

  1. Home Page
  2. About us and Contact
  3. Gallery or Portfolio of Work
  4. Bookings or Purchase Requests

Step 1 – Brainstorm Ideas

Brainstorm ideas for a website (if portfolio for a photographer, what type of photographer, wedding, portrait, famous photographer, …)

Step 2 – Research Content

Go online and research what content you can find for your website. Use Creative Commons sites whenever possible:

Otherwise use Google and add Creative Commons to your search criteria.

Step 3 – Storyboard

Create a storyboard for the website. Before you can create the storyboard you will need to organise all the different elements. Please refer to the Storyboard Workshop from Tuesday:

Storyboarding for Web Designers

Webdesigners benefit from storyboarding. It helps organising content and ensures that every element is included in a logical place according to topic and site.

Read the post on Storyboarding Your Website (Source: nmasse.com).

Storyboard Template

You can use the template below (a modified version of one found on Google Docs Public Templates) :

Storyboard Template

Step 4 – Create the Website

Create the website in Dreamweaver (or any other Code editor) using HTML, CSS and if necessary JavaScript or JQuery.

Your website needs to have a well-designed layout

Attend class to learn about how to set up your website in Dreamweaver. You will learn how to create divs, place images, create an interactive menu and more.

Design and Layout

Here are some important standards to consider for a convincing, well-communicated web page:

  • Clarity is vital (Link to post on IWantClarity.com)
  • Less items on page – make sure to use white space excessively
  • Design should guide the user to information

Please view the PowerPoint show by Sara Ryan on Vic Costello’s ‘Multimedia Foundations –
Core Concepts for Digital Design’: Multimedia Foundations

White Space in Web Design - Courtesy of: unmatchedstyle.com

White Space in Web Design – Courtesy of: unmatchedstyle.com

White Space in Web Design - Courtesy of: OXP - onextrapixel.com

White Space in Web Design – Courtesy of: OXP – onextrapixel.com

Guide to Good Web Design

  • Use Design to guide user’s eye to the information.
  • Keep the layout simple and uncluttered.
  • Use consistent navigation bar throughout the site.
  • Organize text material in clearly defined groups.
  • Be consistent, clear and concise.
  • Stick to standards used on web (Accessibility)
  • Do not include essential information on roll-over images.
  • Include a contact option for the user, this could be:
    • A Help Desk Number to a live person.
    • A context sensitive ‘HELP’ button.
    • An e-mail ‘Ask a Photographer’ or ‘Ask an Accountant’ or ‘Ask an Expert’  option.

Dreamweaver

Today you will learn how to create divs and add colour to them.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Create User Interfaces- Class 5

Inspired by photos by emlyn and clarita from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 4

Today’s Class

  • Talking about inspirations
  • Web Design – Photoshop Workshop (in class)

Talking about Inspiration

While you are a student you should be able to experiment as much as you can. I mean, you should claim your right to experiment in your work. Rather than always going for a conservative option.

On the other hand you never want to stop searching for inspiration in the work of others and in society, the built environment and nature in general.

As you could see with the first assessment – taking close-up photos can lead to unexpected results. Objects never look the same on screen as they do on the floor or in real life.

Close-up at Fed Square, Federico Viola 2013

Close-up at Fed Square, Federico Viola 2013, Found at p.ic

Some inspirations you will simply find in the artwork and design work of current practitioners and past masters. For current designers you want to look at sites and magazines such as Computer Arts and Computer Arts Projects, Mashable,  Design Envy and Dzineblog are just a few inspiring resources.

This week’s Visual Design Component Class covered links and some descriptions of some styles and movements that I relate to very much:

  • Swiss International Style
  • Constructivism (often called Russian Constructivism)
  • Vietnames Propaganda Poster
  • Photomontage

I highly recommend reading up on each and particularly looking at examples of the works. It is good to find out what stylistic choices each movement made and what ideas were big in their days.

Swiss International Style - Joseph Müller-Brockmann - Beethoven - found at www.designhistory.com

Swiss International Style – Joseph Müller-Brockmann – Beethoven Concert Poster – found at http://www.designhistory.com

Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 - click image for more information and link to her blog

Contemporary design in style of Constructivism by Teo Brito found at LauraGreen92 – click image for more information and link to her WordPress blog

It is fine to be inspired by other artist’s and designer’s work. Actually, you should look for greatness in other works and reference their works. This is done by paying a tribute to the original artist in form of a homage.

Experimental Photomontage by Robert Heinecken

Experimental Photomontage by Robert Heinecken

Web Design – Photoshop Workshop

In-class workshop. We will continue to apply the grid system to a website design. This time we will apply the grid to a gallery. The design will depend on your choices of layout and number of thumbnails that you want to feature.

Screenshot - applying 960 Grid 12 Col layout from 960 Grid System

Screenshot – In-class Tutorial: Applying 960 Grid 12 Col layout from 960 Grid System

  1. Access the 960 Grid System site: http://960.gs/ and download their 960 Grid System Templates by pressing the ‘Big ol’ Download Button’. This will start the download of a comprehensive folder by Nathan Smith with 960 Grid System templates and plug-ins for Photoshop, DreamWeaver and many other programs.
  2. In template>Photoshop open the 960_grid_12_col template
  3. Save the file under a new name and in your class folder.
  4. Make sure the guides are visible (Command+; or Ctrl+;)
  5. Add horizontal guides (View>New Guide) at 245px, 255px, 265px, 500px, 510px, 520px, 755px, 765px, 775px and 1010px. Lock your guides (View>Lock Guides or Alt+Ctrl+;) These guides will make it easier to arrange your content and to allow for 10px margins.

    Setting the grid up.

    Setting the grid up.

  6. Use the M (Rectangular Marquee) Tool to create spaces for a banner, text content, image content and a menu. Fill the spaces with colour (Shift+F5). Place each on individual layers. Name the layers (banner, text content, etc)
  7. Place images (File>Place). Make sure that they are located on top of the layers with the colourboxes.
  8. Create Clipping Masks: make sure the banner image sits on top of the banner layer (with the colour space). Have only the layer with the image selected and right click on the active layer (beside the name of the layer) and click on Create Clipping Mask. Your image should take on the dimensions of the layer  below. – Alternatively you could use the short cut Ctrl+Alt+G (Cmd+Alt+G).

    Concept for Gallery Screnshot

    Concept for Gallery Screenshot

The 960_grid_12_col template is based on 12 columns. You can then place your text and images over 1, 2, 3 or more columns. The grid system allows you to organise your website in a visually pleasing way.