When it comes to webdesign the appeal of a site will depend on the taste, preferences and experience of a target audience. We can safely say that children tend to be attracted to bright colours and shapes they can relate to. When it comes to older audiences I recommend to focus on the common interest and purpose of the website. A website for a SciFi purpose (eg a Conference of Star Wars Fans) will need the colour palette and visual appearance of that genre: See Colour Palette Star WarsColour Palette SciFiColour Palette Blade Runner. If you look at a wider scale you find that every genre has its own preferred and collectively agreed set of colours: Colour Palettes of Films.
When it comes to website layout it is important to come from an organised starting point. Initially you should look at applying a grid. We looked at Nathan Smith’s 960 Grid System last week, which can be found at 960 Grid System.
A Clean and Beautiful Layout for a Portfolio by Graphic Designer Derek Chan. Source: Computer Arts Projects- Issue 153, 2011, Design for the Web
The design above for a portfolio website is an elegant and simple (in its beautiful sense) approach to the display of thumbnails. Please notice that the rectangles of the thumbnails match the rectangular shape of the thumbnail cluster as well as the proportions of a screen. This design was based on the 960 Grid System.
Once you have started with the layout and the initial idea for the the website you can create something that suits the need or purpose, the genre and target audience. An excellent read on grid design, how to create your own or how to apply the 960 grid system: Smashing Magazin: Grid-Based Web Design, Simplified.
Some other clean layouts:
Ink WordPress Theme, found at: DzineBlog.comAn example in Spanish with a retro appearance: Hodei DesignSam McCoist Website – Photography. Not exactly my cup of tea, actually coffee, but I like the daring aspect of using large fonts for the menu.This is a template for a business website found at TemplateMonster. It is interesting in the sense that it breaks up the main image as part of the navigation. The sound it comes with is annoying.
Webdesign with Photoshop – Revised Tutorial
In-class workshop. I will show you some basic elements of Photoshop that will help you in your design of a website. It has become obvious last week that the Photoshop skills in the class are below what I expected, so that this Photoshop crash course today will make it easier for you to create the 5 concept pages for your final assessment. It will be good for you to attend to make sure that you get the most out of this workshop.
Creating a file from scratch – for Web or Print
Saving files for the Web, formats
Viewing and changing the sizes of a file
Working with grids
Showing grid and guides
Snap to grid option
Creating a portfolio page
Working with layers
Merging layers (Ctrl+E)
Grouping Layers (Create group and drag layers in)
Working with move tool (using Alt + drag to copy a file)
Hiding layers
Tick the Auto Select option in the options panel for the Move tool
Creating Thumbnails and placing images inside the file
Creating a banner by placing an image in a banner sized file
Placing the banner and thumbnails
Working with Layer masks
Using the gradient for layer masks
Creating the menu, looking at alignment
Creating the title for the header
Saving the portfolio page
Saving the portfolio page as home page
Adjusting the home page
Adding an image and text to the home page
Assessment 2
Please check MyKangan for the assessment. It will be uploaded today and link provided here.
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!
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, Mashable, Design 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 Concert Poster – found at http://www.designhistory.com
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.
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 – In-class Tutorial: Applying 960 Grid 12 Col layout from 960 Grid System
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.
In template>Photoshop open the 960_grid_12_col template
Save the file under a new name and in your class folder.
Make sure the guides are visible (Command+; or Ctrl+;)
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.
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)
Place images (File>Place). Make sure that they are located on top of the layers with the colourboxes.
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 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!
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.
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
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?
Why do we need to plan a large-scale or even smaller-scale project? Let us look at something we might be able to relate to: imagine you have purchased a house in Melbourne (I know you may think – ‘at these prices, how unrealistic is this example’…), so anyway, let us imagine you were lucky and received a well deserved payment from your previous job and are in the position to purchase a house in Melbourne. The house needs some structural work and changes before you can move in. You also want to built a second floor with 2 additional bedrooms and a bathroom.
Now, let’s cut a long story short: you need to get a morgage from your friend – the local bank and contract a builder to do the job.
What will happen without plans/drawings of the changes and new structures? What will happen if you do not specify facts such as:
amount and locations of power points
amount and locations of light switches
where do you want the dining area?
what heights do you have in mind for benches?
cupboard finishes
floor finishes
wall finishes
We get the picture. No project can be completed if you do not have a plan. Plus, you never know when you are finished unless you define a clear outcome!
Before Designing a Website
When you are designing a website there will be a number of pages, technical aspects, payment systems, membership options, design considerations and many other characteristics that need to be considered.
Needs Assessment
’10 hours spent on a needs assessment can save 30 hours of development time’
It is a common fact that clients don’t necessarily understand the efficiencies gained by up-front assessment. Discovering the needs of a client halfway through a project can lead to:
headaches
extended development time
cost overruns
missed deadlines.
Results of the Lack of Planning
Usually the lack of planning can lead to:
the web designer is forced to make decisions based on assumptions, which may lead to significant mistakes
the design team and client will be bogged down in back and forwards communication, this is a waste of time and can be annoying for everyone involved
back tracking can lead to misunderstanding and dead lines may be missed as a result
extra work may lead to a gowth of project cost
Aligning a Website With the Marketing Plan
The website must work in sync with the overall marketing plan. The needs assessment for the website might overlap with the other efforts and approaches of the marketing department, which is fine.
Note that the established branding and marketing of the business should inform the structure and design of the website.
Project Roles
Every project is different, but these are the typical roles in a sizable Web project:
Internal stakeholders (aka “clients”), who represent all primary aspects of the business:
Project manager;
Copywriter or editor;
Web designer
Web developer
Website Content Needs to be Determined
As you prepare to add content to the website, think about who will contribute. In a five-person business, it might be just two of you, and that’s fine.
In a large business or organisation, 5, 10 or 15 people might be contributing content. The time required to edit and proofread both copy and visual content grows exponentially in proportion to the number of people who contribute content.
Questions to Ask a Client
TASK: Create a Catalogue of Questions
In teams of 2 spend 15 minutes developing a list of questions that you would need to ask a client for a website before you could commence planning the website. We will discuss your catalogue of questions in class. You will be able to improve on your list and afterwards …
post it here as a comment! (Make sure to include both your names, but only one of you needs to post) .
The examples of the Design Process form last week may help you with this, so find below the links again and a third one:
Here is another example for the design process that can be used for Web Design: Design Process for Web Design 2 (Source: Dreamweaver CS4, R.Rate & J.Campbell, Natcoll Publishing 2009)
Let us first have a look at this medium, that we seem to know so well. It was 1991 when the World Wide Web became active as a platform for anyone to participate in. It had its origins in military data accessing systems.
Web Services
For the Web to functions it requires a number of Web Technologies. In order to understand what Web Technologies are used for it is important to have a common understanding of web publishing languages such as HTML, CSS, JavaScript or XML.
To view any website on the Internet most people use a web browser. Web browsers work by connecting over the Internet via modem or ISDN (Integrated Services Digital Network) via a server or ISP (Internet Service Provider) to remote machines, asking for a particular document (or page) and then formatting the documents they receive for viewing on a computer.
To allow you to view a web page on your computer, web browsers use a special language called HTTP (HyperText Transfer Protocol). The remote machines containing the documents run HTTP servers. A HTTP server receives a request for a page, and sends it to the computer. The page can then be viewed through the browser.
Each document that is stored on the Web has a particular URL (Uniform Resource Locator). This tells the browser which server to go to to get the document. The syntax of the URL is simple to understand.
The standard for web documents is HTML. HTML is a Mark-up language that uses tags to create all the Web pages. HTML can be used to create formatted text that allows web browsers to make web pages viewable on their screens.
HTTP can also include images, sound, animation and video clips. HTTP weaves together all the relevant elements of the page and describes how it should be represented on your browser. It can also link to other pages or sites on the Web through hyperlinks.
What is the Internet?
So, what is the Internet? I would like to post this as a question to the class.
Let us share our views of what the Internet actually is. What do we see in it, what it is it made up of? What does it symbolise or represent to you?
Please participate in the class discussion before reading on. If you have missed the class and are following the notes online please stop for a moment and think about the question above. You may want to write your responses down before you continue!
—
Image source: Data Center Knowledge
Andrew Blum, a journalist and author of the book ‘Tubes’ explored what the Internet actually is in a physical form. Please use your head phones and view this video from his TED talk in September 2012: Andrew Blum: Inside the physical.
So, has your answer to what the Internet is changed? Please post your responses as comments on this post. Make sure that you add your name, so that I can track back your comments.
Designing for a Client
Before we design a website for a client we need to establish what the client wants and needs. We do this in form of a design brief.
Design Brief
The design brief needs to include relevant data of a client job. This includes due dates, expected outcomes, technical data (eg software and hardware requirements), it may include design concepts expected, and will cover client expectations such as what they are trying to achieve with the project/design.
It is your task to understand the requirements of a client and to translate them into a successful product or outcome.
The first step in this journey is to establish a design or project brief.
The brief may be given to you by the client. You will then need to analyse and rephrase to ensure that you understand the desired outcome.
In my experience you will more likely need to establish the design brief by collecting information from e-mails, verbal statements from client meetings and asking a number of key questions.
Business entrepreneurs know to have a system of questions in place to ensure that they know what to ask the client.
The following step is to contact the client and get him or her to agree on a brief. This can be done in form of an e-mail and asking the client to read through the brief and respond to it.
Please open the file below: Design Process for Web Design (Source: Go Wild Web, Carol Green, Natcoll Publishing 2006)
We will read through it together and discuss it in class.
Compare the list to this list: Design Process for Graphic Design (Source: Go Wild Photoshop, Jamie Campbell, Natcoll Publishing, 2006)
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!
The classes will be delivered in 3 hour schedules. The content will be posted on this blog as well as on MyKangan. Tasks, discussions and research will be conducted inside the 3 hour slot and at home.
You are expected to work towards goals independently and to be able to operate as part of a team. In a work place you will sometimes be lucky to work with people that you easily get along with, but unfortunately you might often have to work with people that you might not easily get along with. A professional looks beyond this and finds ways to function in a professional environment with a range of personalities.
Assessments:
Important: You need to submit all your assessments on MyKangan. It is your responsibility to follow up due dates and access to MyKangan.
Day 1 Task – this task is a simple comprehension task to establish student participation. (due: after the first class)
Assessment 1 – Establish a Design Brief
Assessment 2 – Design a Website
RAE – Research and Exploration or Class of Federico
This blog will be or main form of contact. It will be accessible from anywhere as long as you have internet access.
The web address is http://www.classoffederico.wordpress.com, and the name is RAE – Research and Exploration – Never Stop Learning. You might also call it Class of Federico or COF.
Make sure to leave comments on a regular basis. Any questions that you have can be posted as a comment. The posts for each class will be released prior to the class and in some cases the evening before.
A link above the blog’s banner with the title ‘Cert IV Web-based Tech’ will let you access all classes and posts according to class.
RAE has many links listed to improve your learning experience. Links for Web has 9 excellent links that I would like you to look at now and spend 10 mins exploring them.
Links for Learning is filled with great websites. Let us just have a look at these four for now:
Adobe TV
Dzine Blog
Computer Arts Magazine
Shortcutworld
Make sure to explore the links when you have some free time. The best learning is done by yourself exploring and questioning.
MyKangan
MyKangan is Kangan’s content delivery platform for all classes. You will find all the content on MyKangan and as stated before: you will submit your assessments here.
To access MyKangan please open Kangan’s student portal and click on MyKangan. Next find the class by unit title. This can be a bit hard to see, so make sure to know the unit titles.
The unit title for this class will be combined in (the catchy name):
As you can see, the titles are long and hard to remember. The easiest is to look at the last segment with the unit code and title.
The unit itself will be structured in the same way, that you have classes listed as Class 1, Class 2, etc and assessments will be listed by title inside an assessment folder.
This is also where you will submit your assessments. You will find hyperlinks with names such as Submit Assessment 1 here.
You can send messages to your teacher and you can leave comments as well. I am always open to suggestions, so please feel free to forward ideas about content or software that you would like to cover.
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Illustration by Jessie Ford, found on DzineBlog.com
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Photo by mconnors on morgueFile
A Beautiful Piece by Aerosol found on his Facebook
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Jenga, photo courtesy of: Design-Crit.com
Photo by matthewbridges on morgueFile.com
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
Table of Content from Textbook – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
Illustration by Jessie Ford, found on DzineBlog.com
Illustration by Tavis Coburn found on DzineBlog.com
Text and Shapes – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)
I Want You – Emily Strange, The lovable Emily Strange came to life in 1991, designed by Nathan Carrico for Santa Cruz Skateboards. She is referred to as a counterculture icon. I would just call her a sceptic. Image found at: Kollectable Kaos
Based on photo by hotblack from morgueFile.com
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
Work by Justin Anderson
Illustration: Jamie McKelvie – Art Brut Record
What Time is it Now? by King_Bobbles
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Couple found at http://frenchbydesign.blogspot.com.au
Based on a photo by delboysafa from morgueFile.com
This is a template for a business website found at TemplateMonster. It is interesting in the sense that it breaks up the main image as part of the navigation. The sound it comes with is annoying.
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Photo by hotblack on morgueFile.com
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Text-based Table of Content – Very Graphic and Black and White- found at: Smashing Magazine (click image for inspiring article on table of content design)
Close-up at Fed Square, Federico Viola 2013
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Screenshot from What’s Your Story by Joyce Hostyn
Vista Lighting Effect – Courtesy of: Tutorial9
Photo by dharder on morgueFiles.com
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Michael Pointing in GTA V – Courtesy of Rockstar
The concept was used on the German side as well with this ‘Auch du sollst beitreten zur Reichswehr’ [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Good Morning! Photo: wallyir, from: morgueFile.com
Photo by frenchbyte on morgueFile
Examples of Output and Display for web-content. Image: live.surveyshack.com
Free Transform and Ctrl – I am loving it!!!
Photo by DTL on morgueFiles
“Step into my office” Source: The Age, click image for link
Luminescent Lines – Courtesy of: PSDLearning
Grassy Rabbits
Light Streaks – Courtesy of: PhotoshopEssentials
Multimedia Production Cycle – This image is under the Creative Common Agreement, you can use it but will need to reference this site: www.classoffederico.wordpress.com
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com
Image Source: www.photoshopessentials.com
Custom Shapes and Custom Shape Icon
Example of applied changes
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
Source: morgueFile, Photo by matei
ruthworkx -http://ruthworkx.files.wordpress.com
He loves OHS! – Photo by Karpati Gabor on morgueFile
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
Courtesy of The Art of Mass Effect Universe’, 2012
Typographic with Colours and Photos – The use of large numbers is effective and the low opacity of the boxes works, personally, I find it looks a bit dated- found at: JuxtaPost.com
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
Photo by clarita on morgueFile
Courtesy of The Art of Mass Effect Universe’, 2012
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Geese in Ameland, Photo by Frans Schouwenburg
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Photo by Seemann on morgueFile.com
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Experimental Photomontage by Robert Heinecken
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Image from morgueFile by lemai13
Massive Attack – The Essential Mix
The gentle curve of the river and the light green tones of the grass give this image a calming feel. The montains and the clouds have a less calming effect. Image: courtesy of Icon Photography School – http://www.photographyicon.com/line/
Image source: Data Center Knowledge
Photo by clarita on www.morguefile.com
The Face by drfranken found on ChromoArt.de
Illustration by Kate Miller, found on DzineBlog.com
Photomontage: Amir Ebrahim Photography
Photo by omdur on morgueFile
Work by Egon Schiele, found at Mom.org
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Photo by mcconnors on morgueFile
Peace- Swiss International Style Reference – by Maryam Chananeh
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
Setting the grid up.
Concept for Gallery Screenshot
![The concept was used on the German side as well with this 'Auch du sollst beitreten zur Reichswehr' [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss](https://classoffederico.files.wordpress.com/2014/04/world-war-propaganda_auch-du-sollst-beitreten.jpg?w=458&resize=458%2C585#038;h=585 "world war propaganda_Auch du sollst beitreten")
RAE - Research and Exploration 