Banner_Cert IV WebBTech-C1

Link to all Weeks     Week 1     Week  2     Week 3     Week 4      Week 5     Week 6

Today’s Class

  • Assessment 2
  • Inspirations
  • Webdesign with Photoshop 960 Grid System
  • Feedback

Assessment 2

Today you will receive Assessment 2.

For the moment I would like you to commence the first two tasks of the assessment:

Instructions:

Based on your brief that you have developed for   assessment 1 develop a concept for a web site with 5 pages, including   e-business aspects: the user must be able to purchase units online. PayPal is   a good option for this, include a PayPal logo and a PayPal payment option   (visually).

Task 1:

Describe each of the 5 pages. Include a page title and a list of keyword suggestions.

Task 2:

Sketch out each page! Create a minimum of 10 wire frame sketches. This means 2 concepts per page.

Create these sketches by hand and scan your sketches and supply as an attachment or paste into Word document.

Inspirations

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, MashableDesign Envy and Dzineblog are just a few inspiring resources.

Below are links and descriptions of some styles and movements that I relate to very much:

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

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.

Looking at some bad website might be a good idea to know what possibly to avoid: http://www.webpagesthatsuck.com

Webdesign with Photoshop – 960 Grid System

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 ScrenshotConcept 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.

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!

Banner_Cert IV WebBTech-C1

Link to all Weeks     Week 1     Week  2     Week 3     Week 4      Week 5     Week 6

Today’s Class

  • Assessment 1
  • Example of Web Sketches and Wire Frames
  • Feedback

Assessment 1

Please continue your work on Assessment 1. You will need to supply 2 sketches, which are also referred to as wire frame sketches. When developing your sketches think of an overall layout for your webpage. You can look at 960 Grid System  and The Grid System for inspiration on how to divide a page based  on a grid system.

Look here for examples of sketches: Speckyboy Design Magazine.

It is due in 1 week – Friday, 30/8/13 5:30pm.

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 – Assessment 1Banner_Cert IV WebBTech-C1

Link to all Weeks     Week 1     Week  2     Week 3     Week 4      Week 5     Week 6

Today’s Class

  • The W3 Consortium
  • Screenshots from Week 3
  • Exercise
  • Assessment 1
  • Feedback

The W3 Consortium

This is quite a fancy name  and a Google search defines consortium as:

An association, typically of business companies. So, the World Wide Web Consortium is an organisation with the aim to make the WWW a useful tool for everyone. Their aim is to maintain a standardised Internet with standardised markup languages, such as HTML, XHTML, HTML 4 and now HTML 5.

Semantic Web

One of the aims of the W3 Consortium is to create and maintain a Semantic Web. This is the aim of converting the current web, dominated by unstructured and semi-structured documents into a “web of data”.

Screenshots From Week 3

Screenshot3Screenshot2Screenshot1

Exercise

Get together in 4 teams of 2 to 3.

Round 1 – 20mins

You will be the client.

Client team: use your set of questions from last week (or refer to the screen shots above) and establish what type of website you need (make it up). Write down a name for your business, a product, and establish the purpose of the website.

You will have 20 mins, so do not rush and be to the point.

Round 2 – 5 mins

You are the Web development team. Agree who will be the project manager and who will be the Web designer (don’t worry about the titles, it is just a role play.) For approximately 5 minutes agree on a set of questions that you want to ask a client. You only have 5 minutes, because you have developed the questions last week.

Round 3 – 30mins

2 teams are Web development teams, the 2 other teams are clients.

Web developers: ask all necessary questions and discover what your client needs. Make sure to be pro-active and to ask every question that will help you design their site.

Client: you only answer questions. You do not give information without being asked. Do NOT show your sheet to the Web developers.

Round 4 – 30mins

Swap sides. and do the same as round 3.

Round 5 – 20mins

Sketch a concept for the front page and label the different aspects and elements (colours, buttons, navigation, etc)

Discussion

What were your experiences? What did you forget? Was it hard to include most of the information? Was it easy?

Screenshot 15Aug03
Screenshot 15Aug03
Screenshot 15Aug03
Screenshot 15Aug03
Screenshot 15Aug03
Screenshot 15Aug03

Assessment 1

Web Design Brief Template

Here is a final web design template by the DMA – the Digital Marketing Agency: Web Design Brief Template with important questions. Please make sure to look at the examples to help you with your

Assessment 1

Download this file: C1 – Assessment 1.

It is due in 2 weeks – Friday, 30/8/13 5:30pm.

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!