For Week 10, please complete the following:
Create a four (4) to six (6) page web site profiling one floor of the AIP building. You will construct a web site that details the floor, its activities, its resources, and any other information deemed relevant. Have fun! Ask people questions about what they do on the floor, what they like about the floor, etc. Take PLENTY of pictures!
Specific requirements:
- Include a header area with the name “Art Institute of Pittsburgh” and the “nth floor” at the top
- Include prominent and simple navigation
- Include the AIP logo on each page in a prominent location
- Include the name of our department (Web Design & Interactive Media) as a footer on each page
- Include your name in the footer as the designer of the given page
Content requirements:
— One panoramic image (can be a stitched rectilinear image or a 360 pano)
— At least three rollover buttons (navigation or other) using ImageReady, Dreamweaver, or CSS techniques
— Standard web style (as much HTML, CSS, etc. as possible)
— One GIF animation (not Flash!) for use on the site
— Plenty of photographs
— Optimization for the web (JPG, GIF, or PNG, as appropriate)
— Use of vector shapes, Illustrator drawings, buttons, or other images created in Illustrator
— Use of Photoshop and “Save for Web”
Good luck. Have fun. Be creative. Kick ass.
For tonight, you will be performing a peer review of kiosk screens. Please break into groups of three (3) and review the screens submitted by your two peers in the group. Review the kiosk designs based on the criteria listed in the Kiosk Peer Review Worksheet. A group of four is permitted (no more than four, please!); your group must have at least three members. (Sorry I can’t be there with you tonight!)
Your final assignment, due Week 10 (September 12), is as follows:
Topic: Create and present your screen design portfolio.
Details: Create a Power Point or PDF presentation of your cumulative screen designs. You will be presenting these designs to the class in Week 10. We will begin presentations in Week 10 at 7:30 PM.
Include the following:
1. Your original Business Screen Set (all screens) + 1 redesign
– Select one screen to revise based on feedback and course concepts
2. Your original Contemporary Screen Set (all screens) + 1 redesign
– Select one screen to revise based on feedback and course concepts
3. Your original Kiosk Screen Set (all screens) + 1 redesign
– (Noticing a theme?) Select one screen to revise based on feedback and course concepts
4. One new screen for a Flash interface
– Theme: Select a student club or organization at the Art Institute of Pittsburgh and design a Flash interface for the club
– Optional theme: your choice.
– Submit a Creative Brief for this assignment by next week, Week 9.
– Employ a number of vector shapes and flexible, “Flash-style” graphics
In total, you have four new screens to create for Week 10. Please email me with any questions or post your questions to the discussion below.
creativepro.com has a nice write-up on CSS style usage in Dreamweaver, starting from a basic idea of what you wish you site to look like.
Final Project Requirements | G413 Web for Graphic Design
Purpose: To emphasize the aspects of all HTML and graphic techniques covered within this course.
Topic: Create a five to seven page marketing-style web site for a company.
G413 Final Project Requirements
Select a product or service and create a marketing-style web site based on the company you’ve selected. This should not be for your personal portfolio; it should be for a company or service that needs a web site. If you cannot find a project to do, create a fictional company and use Corbis or royalty-free images to create your idea.
Absolutely no copyrighted work will be permitted on your site unless you submit, in writing, a proof of permission obtained from the copyright holder. You will receive a failing grade for the project if you do not provide evidence that you own the copyright or have obtained permission to use copyrighted work.
Your project should be posted to your URL in a subfolder called “final” …
e.g. http://abc123.aisites.com/final
The first page of the site should load automatically when someone types the URL into the browser address bar. (hint: index!)
Specific Content/Design Requirements:
- A 5 to 7 page web site
- Consistent and standard navigation must be used
- Include at least three rollover buttons (may or may not use these for navigation)
- Include one animated GIF that you create
- Use valid copy (no sample text or “greeked”/lorem ipsum text)
- Use external CSS for fonts, styles, colors, and other items
- Include a table that shows product features or a pricing sheet
- Include three font family changes
- Include an example of an ID selector in your CSS
- Include an example of a CLASS selector in your CSS
- Include images
- Include a background change (either image or color)
- Set the default font to be a font family other than Times New Roman
- Change the link colors to differ from the standard HTML style
By week 9, be prepared with a working version (rough draft) of your site. This working version will count towards your assignment grades.
What we have here is a huge list of panoramic resources. These sites will help you to learn more about panoramic image creation and publication. Continue reading “panoramic links/resources”
Hope you enjoyed all of the wonderful things that frames can do. Here are the Week 7 Frames Examples as covered in class.
Your homework for next week is to create a two-frame frameset with navigation on the left and content on the right. Create an HTML file for your left navigation and allow two links you create in that page to update the frame on the right. Create a third link in the left frame that “clears the frameset” so that it loads within the full browser window, not within the current frame. Then, create two HTML pages for the right frame, including headers (h1 - h6), text, and at least one image per page. Remember, frame naming is very important!
My honest recommendation is to use frames only when necessary or when no other solution will do the trick. As you advance with web design, you will learn even more about how to use CSS to create flexible and clean-looking pages without resorting to frames as a formatting tool.
Remember, frames are not friendly. They are not easily navigated if someone finds your site from outside of the frameset. In addition, frames rely on browser-specific support, and your site will be difficult to view on smaller, hand-held devices when using frames.
Frames are a very nice tool to have in your web design arsenal, but they are by no means the most versatile of the methods learned in this class. Tonight, we will talk about frames, their usage, their Continue reading “Frames”
Tonight, we will make a sharp departure from working with ImageReady and Photoshop. In Dreamweaver, we can design flexible and well-designed pages based on Cascading Style Sheets in combination with basic HTML. We will cover the basic concepts of CSS, the interaction between HTML and CSS, and we will work in Dreamweaver to put these concepts into action.
This is a great article for CSS usage in Dreamweaver 8. We only made it through Part 1, Page 4 tonight, but we will continue to explore the CSS features next week. As a note, create a subfolder within your site, titled dwtutorial, and store your HTML and CSS files within this folder.
Your assignment for next week is to describe your Dream Job.
This document should be three paragraphs in length, and you will use your basic HTML page to describe your job. Create an external CSS file, link it to your document, and include these files as part of your site. Prepare these documents for next week and bring them to class with you. You may upload these to your site, but it is not necessary.
Within the CSS file, include examples of the following:
- Three paragraphs
- Three headings (choose from h1 - h6)
- Padding
- Margin
- Border
- Color changes on border, backgrounds, and text
- Border style changes
- Font changes (family, weight, size, or other style changes)
For additional reference, please read through this article related to CSS and the method by which we can add styles to our pages: A CSS Primer as related to Dreamweaver functionality.
In addition, W3Schools has a reference for CSS properties and XHTML that would be worth bookmarking. Good luck!
Fun with blending and transparency settings … also, we should try out clipping masks in Illustrator.
For next week, design an interface in Illustrator appropriate for a Flash interface.
Here are the Week 6 Files (Tables and Layout) for your review. Enjoy, and make sure you have your proposal for your final ready for me next week. YTMND.
