Art170. Final Project Planning

Transcription

1 Final Project Planning Projects For the Next Two Weeks During the next two weeks of this class, you are going to thoroughly prepare your final web project. If you plan all details, putting the site itself together will go smoothly and quickly. The preparation will include the following components: 1. Propose your site topic 2. Collect examples of sites that have a similar theme (called Morgue file) 3. Assemble images for the site 4. Create a color theme at Kuler 5. Create a Style Tile 6. Create a flow chart of the pages/sections of the site 7. Create sketches for possible layouts 8. Select the CSS Starter Page that best represents your sketches 9. Create a wireframe of at two pages of the site 10. Create a composite design of the site 11. Assemble everything into a Design Document (such as an Acrobat Portfolio) PROPOSAL Write a short proposal about your topic and what you plan to present on your web site. You may create a portfolio site, a business site, or an organization site. No family sites, please. The entity must be real. Note: Word has proposal templates that you may use. RESEARCH Collect pieces that will give you ideas and inspiration for your site Browse the web and look at sites similar to what you are trying to achieve. Take screen shots or save pages as web archives Look at print, magazines and other print materials ASSEMBLE IMAGES Options for acquiring images: The client provides appropriate images You take images with a digital camera You purchase images from stock photography sites. Rights managed is pay per use and royalty free is unlimited use 1

2 Stock Photography Sites Micro Stock Sites istockphotos.com ( ) Dreamstime.com ( ) BigStock.com ( ) Shutterstock ( ) stock.xchng ( ) Free Images Free Icons Font Awesome - Icon Moon (create your own font) - Provides common interface graphics and browser: Read about the Creative Commons License: To SEARCH for images under the Creative Commons, visit: COLOR SCHEME Using research gathered in your proposal, morgue file, or assembled images to create a custom color palette for the final project. Use Kuler to create color themes from images, logos, or mood. 1. Go to the Kuler website: ). 2. Enter your Adobe ID and password or sign up to get a free membership. 3. Under the Create link in the bottom footer navigation click Create From Image 2

3 4. Click Upload button to upload one of your image 5. Adjust points in the image to select color chips below it 6. Click SAVE and then download the theme if you like. 7. Click Edit to see the hex or rgb code for each color. 8. Write down the codes. CREATE A STYLE TILE Use the provided Fireworks document on the class web site to assemble the design information for the site. SKETCH On a piece of paper or in Word or Fireworks, draw a flow chart for the pages and sections of your site. Use the grid sketch pages I give you to sketch some layout ideas. 3

4 Select a CSS Starter Page that best represents the sketch you select. Before you sketch consider what to do or what not to do when designing web sites: Wireframe Keep in mind the fixed-width CSS Starter Page you are going to use: three or two column with the sidebar either on the right or left. Open wireframe_12_col.fw. You will see that there are two pages (Use the Pages panel to locate them). Open the Document Library (Window > Document Library). Open the Common Library (Window > Common Library). Use the different symbols Drag items out so that the wireframe looks like your final sketch. Create the Composite Design Use Fireworks, Photoshop, or Illustrator. You will export your assets from this design. In Fireworks you have already learned how to slice a document. In Photoshop, you can use the new Generator feature to automatically export assets. Create Your Design Document Flowchart Sketch (if you can scan it) Style Tile with additional materials you would like to include - logos, scanned textures, font samples, color palettes, images, etc. Wireframe Fireworks click-through Acrobat Portfolio 1. File > Create > PDF Portfolio 2. Select a layout style and click Add Files 3. Add the files of your portfolio 4. Customize the portfolio 4

5 Installing Fonts on Your Own Computer Macs: S Windows 7 & 8: Windows Vista: Windows old versions: 5