On your external drive create a folder titled “Web Design DES-681”
Within that folder, create eight main additional folders with the following titles:(Within the main folders you will also create additional folders).
- “research”, which contains additional folders (resources, PowerPoint)
- “logo”, which contains additional folders (ai files, psd files, gif files, jpg files, png files)
- “web layout”, which will contain a png file
- “web element originals”, which contains additional folders (psd files, ai files)
- “web ready images”, which contain these types of files (png, gif, jpg, ico files)
- “flash”, which contains additional folders (fla files, swf files, resources)
- “web content”, which contains the content for the website in text formats
- “website”, which contains additional folders (html, css, images, flash)
- *resources = any files that were gathered or will be used within that particular file, i.e., images, website, word docs, etc...
Creating the Blog I.2
APPLICATIONS USED: Web Browser
In this blog, you should keep all your notes, planning materials, sketches, photos, screenshots, interviews and photos from your work.
(Note: the following instructions may vary somewhat as the Blogger software is updated.)
- Go to Blogger.com website
- Click “Create Your Blog Now
- If you have a Google account already (like gmail account), click “sign in first”. If not, fill in the information and create your own Google account.
- Name Your Blog
- Choose a template
- You will get an email from Blogger to verify your email address and to activate your blog account.
- Click the link in the email, you will be able activate your account.
- When you go to your Dashboard in your own blog account (image below)
- Go to “+New Post” when you want to post a new blog entry.
- Go to “View Blog” when you want to see your past entries.
- Go to “Posts” when you want to edit your past entries.
- Go to “Settings” when you want to change the basic settings for publishing and formats.
- Go to “Layout” when you want to change the template, color and fonts
Making a post:
- When you post a new blog entry, click in dashboard.
- Start by giving your post a title (optional), then enter the post itself by clicking “Embed”.
- When you're done, click the "Preview" link to make sure it's ready to go:
- Once you're satisfied with your post, click the "Publish" button. This will publish your new post:
- When you want to upload an image, click the button with photo (add image) and select the image from your files.
Ask your parents, other faculty, use search engines, etc. to find these websites aimed at an older audience.
Research younger audience habits and tastes I.4
“Gen-Next”, “Millennials” (check the web for other terms) are just a few of the current names for the teen and early adult generation. In addition to your own anecdotal observations and your knowledge about web and social network sites, do research on what professionals say about 16-24 year olds. This will help you tailor the content and design of your website–all the while, staying within the guidelines of the assignment).
You will need at least three sources, but find 10 or more to choose from. Your research should be about the habits, tastes and patterns of the behavior of this age group.
Take your digital camera, video camera and head over to Union Square Park, other schools or interview some of your classmates. Find your target audience to interview. A few of you could go together. Conduct interviews. Ask about the sites they visit and like for what reasons, what stores, other things they like to do. Take some photos or video clips, get audio if possible.
For content and design inspiration, find existing reference websites and documents 1.5
- Use the knowledge you have gained about this audience from your research and your own observations about this group’s preferences to identify websites and social networking sites aimed at 16-24 year olds.
- Find three to five sites (any content or purpose) aimed at this group, for color, font, logo and image inspiration.
- Find two or three social networking sites aimed at this group. Collect these in order to learn more about the grammar / word usage and aesthetic style of this type of website.
- Choose a theme for the site / social networking site related to a theme from the original site, adapted for a younger audience, then find one or more references (documents or websites) about the chosen theme to help you create appropriate text.
APPLICATIONS USED: PowerPoint
Design a Power Point accompanied by speaking notes and prepare to present the Power Point to the class.
Guidelines for designing the Power Point:
- Use a consistent, simple background
- Establish a simple “grid” (layout) and stick to it
- Place the invented name for the site in the upper left, right or lower left, right and
- remain consistent from screen to screen. Put your name in another corner of each screen.
- Choose one system font family
- Use five to 20 words per screen
- Do not use clip art
- Use simple, bold images (when showing websites, zoom in on portions rather than showing the whole page)
- Have an intro “Welcome” screen and an outro “Thank You” screen
Organize the PowerPoint as follows:
- Introduction screen, i.e., “Redesign of Sears.com as a Social Networking Site for ‘Tool-Lovers’, 16-24 years old”
- Existing Website screen shot
- List characteristics of 16-24 year olds (one-two screens of bullet point from what professionals say based on web research; one-two screens of bullet points based on your own anecdotal observations and what your friends tell you).
- Reference Websites for color, images, text style, including:
- Three or more sites (for any purpose) already aimed at the 16-24 year-old audience
- Three social networking sites
- Color palette you are proposing for your homepage redesign (usually one monochrome plus one to three other colors taken from the reference websites. In the PowerPoint, simply show the color palette as equal size blocks next to each other (touching), all on one screen.
- Show the development of the new name. Create the new name based on a theme, product or activity extracted from the exiting site. Alter these word(s) to conform to the manner of naming found on the reference and social networking sites.
- Thank You screen at end.
Generally, there will be 9-15 screens in total.
