We will read through this task together please click on the link to download the file. Follow the in-class discussion and make sure that you understand each question or ask the teacher in the presentation!
We will commence Dreamweaver training. We will use the video tutorials provided on Adobe TV’s Webdesign Channel, but I would like you to open this online PDF to get you started: A Beginner’s Cookbook to Dreamweaver.
Note: Before you view ‘Defining a new Site’ create a folder with the name dw website and subfolder by the names: assets, CSS, images, notes, scripts and video.
If you had trouble getting responses from businesses please do a refined Google search including your questions with the terms print industry (or similar: Print sector, print employment, print employee, etc). Look for articles and posts about the print industry and the employment opportunites.
Next formulate your answers to your questions based on your findings. Always state your source of information.
Assessment 2
First look up the definition for the term in question. Fill in the textbook definition, write down the source (book title, author, publisher and year or URL/web address of web page and next write your own definition. There are 47 terms to look up in total. You will need 30 correct answers for a COM.
A tipp: If you cannot find the correct term, do a Google search and include words like:
printing terms
printing terminology
printing industry
printing vocabulary
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!
Assessment 1 is a planning assessment. Your focus will be on creating an interactive PDF for an event of your choice. Assessment 2 will then focus on the creation of the interactive PDF. We will go through the steps of creating the interactive PDF in the next 2 weeks.
Assessment 1 requires of you to plan an interactive PDF for an event of your choice. Assessment 1 will not require for you to create this interactive PDF, you will just plan for it.
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?
In groups of three develop an E-learning resource that allows local prep children to improve their understanding of the English Alphabet (primary aim of project). The tool should allow the children to have as much exposure to the letters as possible. You will need to develop concepts that explore letter recognition and recreation.
The secondary scope of the project is for the children to learn to type the letters in a QWERTY keyboard.
Team Work
You are required to team up in a team of up to 3 students. There is the option to work alone, but you need to inform me and get confirmation. If your name is not in the list below you need to inform me about the people in your team. Send a message to this blog with names of all the team members.
1 – Goals of the Learning Resource
The overall goal describes what the learner will be able to do after completing the instruction. What will the learner learn?
This could be: how to write the alphabet, to sing songs in Italian, how to draw animals.
2 – Content of the Learning Resource
The content describes what will be taught in order to achieve the objectives. What content will you include in the resource? This is just a list of points.
This could be: the alphabet will be available in different styles, animal shapes, as fruits, or the lyrics of Italian songs will be supplied, sketches of animals and photos of animals.
3 – Methods of instruction
The methods of instruction describe how the content will be taught. This is about the specific tools, that you want to use. Mention the use of supportive tools such as sound. Will there be a narrative (a story) told by a voice over or a character (eg a teddy).
How is the learner informed about what to do? What types of instructions are available?
This could be: using video resources to explain the alphabet with sing-along-songs, writing the alphabet on a touch screen by following the shape of the alphabet.
This could be: individual letters of the alphabet need to be drawn with the finger, the singing is matched up against the original song, the shapes of the animals can be traced with the finger.
4 – Concept for the Interface
Develop the interface as a sketch in pen, pencil or mixed media. Add arrows to describe functions and colours. Scan your concept sketches and final sketch.
Format
This project needs to be submitted in digital paper format, either as a PDF, PowerPoint presentation or a Word document. Include your sketches.
I have broken the Assessment brief from last week down into 2 Assessments.
Assessment 1 will focus on step 1 – your research and establishing your target audience.
Assessment 2 will focus on step 2 – designing an e-learning concept (game) and documenting the idea in a paper-based format. Paper-based means that you will create the design and planning of the e-learning resource without the actual final product. You may do this as a PDF.
Assessment 1
Brief
In groups of three develop an E-learning resource that allows local prep children to improve their understanding of the English Alphabet (primary aim of project). The tool should allow the children to have as much exposure to the letters as possible. You will need to develop concepts that explore letter recognition and recreation.
The secondary scope of the project is for the children to learn to type the letters in a QWERTY keyboard.
Team Work
You are required to team up in a team of up to 3 students. There is the option to work alone, but you need to inform me and get confirmation. If your name is not in the list below you need to inform me about the people in your team. Send a message to this blog with names of all the team members.
Teams so far:
Lucine Y, Fatma Y & Benan Ü
Justin A & Joe W
Berna K, Emel & Naşide S
Vlad K
Michael T & Tim B
1 – Establish Your Project
Read the assessment task fully and write in one or two sentences: When do you know that the E-Learning resource is complete? When do you know that this project is finished?
This will help you establish clear boundaries for your project – for any project and you will know when you have finished.
2 – Establish Your Target Audience
Write a extensive description of your Primary Target Audience as well as your Secondary Target Audience.
If your Primary Target Audience is the user group of your product (students), then your Secondary Target Audience would be a related group of people (friends of the school children), who could be a user group or maybe a provider of the service (eg teachers) or a group that is interested in the well-being of the school children (eg parents). I would focus on the teachers and other staff at a school, they would be involved in the purchase of the product.
3 – Learner Needs Analysis
Write down the needs of your target audience? Start this point of with the desired outcome: what does the learner need to learn? After establishing this you can look at what the target user will need to be able to learn.
This is a good point to brainstorm. What is it that you need to expose your learner to?
4 – User Experience
In a paragraph describe what user experience you are designing. What will the child playing the game experience? What emotions will the user go through? What emotions will your user not have?
You could aim for a user experience that is fun or interesting, you could say that the experience may be challenging and the learner will always feel like he or she needs to think and try things out before achieving success. This could result in the learner feeling more engaged and claiming the acquired knowledge.
5 – Platform
Specify the delivery platform, eg using web-based delivery, using computer based delivery, using tablets or mobile phones, a console, etc. The operating system would be another aspect here: use of IBM-based Windows 7, 8, Mac-based OS, Android, Linux, Open Source…
Add a minimum 1 sentence describing benefits and short comings of a specific system, software, delivery platform (eg using Flash has the disadvantage that it is rejected by Mac operating systems and more and more by Android.
6 – Research of existing E-games
Collect research on existing e-learning games for your target audience. List a number of websites and available games on the platform of your choice. Take screenshots or find images on Google or other search engine.
Describe your favourite 3 sites / favourite 3 e-games. Describe what you like about each (graphics, game play, actions)
Format
This project needs to be submitted in digital paperformat, either as a PDF, PowerPoint presentation or a Word document.
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
What Time is it Now? by King_Bobbles
Constructivism Reference – by Lylah Livingston
Michael Pointing in GTA V – Courtesy of Rockstar
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.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)
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
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/
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Experimental Photomontage by Robert Heinecken
Based on photo by xandert found on morgueFile
Lines and Gradients- Courtesy of: psdtuts+
Geese in Ameland, Photo by Frans Schouwenburg
Based on image by hotblack on morgueFile.com – F.Viola
Found at Inc.com
Illustration by Jessie Ford, found on DzineBlog.com
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Illustration by Jessie Ford, found on DzineBlog.com
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
A Beautiful Piece by Aerosol found on his Facebook
Photo by ariadna on morgueFile
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
Image from morgueFile by lemai13
Illustration: Jamie McKelvie – Art Brut Record
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/
Photo by hotblack on morgueFile.com
Italian movie poster found on Abduzeedo.com
Photo by DTL on morgueFiles
Work by Egon Schiele, found at Mom.org
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)
Work by Jo W
Photo by clarita on www.morguefile.com
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Grassy Rabbits
He loves OHS! – Photo by Karpati Gabor on morgueFile
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)
“Step into my office” Source: The Age, click image for link
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Photo by frenchbyte on morgueFile
Concept for Gallery Screnshot
Illustration by Kate Miller, found on DzineBlog.com
Example of applied changes
Photo by omdur on morgueFile
Vista Lighting Effect – Courtesy of: Tutorial9
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
Based on photo by dhester from morgueFile.com
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Image Source: www.photoshopessentials.com
Screenshot from What’s Your Story by Joyce Hostyn
Courtesy of The Art of Mass Effect Universe’, 2012
Photo by mconnors on morgueFile
Photo by Seemann on morgueFile.com
Layers in Photoshop are like a Collage of images stuck on top of each other…
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
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
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Couple found at http://frenchbydesign.blogspot.com.au
Based on a photo by delboysafa from morgueFile.com
Photo by mcconnors on morgueFile
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
Photo by matthewbridges on morgueFile.com
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
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
The Face by drfranken found on ChromoArt.de
Photo by dharder on morgueFiles.com
Source: morgueFile, Photo by matei
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
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
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Work by Justin Anderson
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Setting the grid up.
Peace- Swiss International Style Reference – by Maryam Chananeh
Image source: Data Center Knowledge
Free Transform and Ctrl – I am loving it!!!
Courtesy of The Art of Mass Effect Universe’, 2012
Jenga, photo courtesy of: Design-Crit.com
ruthworkx -http://ruthworkx.files.wordpress.com
Based on photo by hotblack from morgueFile.com
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
Photomontage: Amir Ebrahim Photography
Illustrator unknown – found at: Ephemera – World of Rare Books
Custom Shapes and Custom Shape Icon
Examples of Output and Display for web-content. Image: live.surveyshack.com
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
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.
Good Morning! Photo: wallyir, from: morgueFile.com
Photo by agathabrown on morgueFile
Massive Attack – The Essential Mix
Light Streaks – Courtesy of: PhotoshopEssentials
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
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=246&h=313 "world war propaganda_Auch du sollst beitreten")
