> > > Portfolio Project

Transcription

1 > > > Portfolio Project Project Info This will be a site dedicated to you, your work, and your brand. Must include: These items can be organized in whatever manner you want, but must be included: Design: Your site should have a cohesive design, considering your branding. This includes your logo, color scheme, and type choices, as well as visual flow and hierarchy. Images: At least six images of your design/art. Include thumbnails linking to details, if you want. Include captions and/or project descriptions. Use a directory for your images. About You: A description, or a resume, or both. Include a photo of you, if you want. Contact: Most likely an link. You can also include links to other sites on this page or create a links page, if you want. Also include a link to your blog. Navigation: Include navigation that is easy to locate and easy to use. Each page should include navigation to the other main pages. Consider having the same navigation layout on all pages. Grading Your grade will be based equally on the creativity, easy-usage, and the technical code. Your project grade will include your careful completion of the Project Write-Up (see below). Presentations You will be presenting your site to the class, so be prepared. > > > > Project Write-Up MUST INCLUDE On your blog, create a project write-up page. MOOD BOARD This is a digital brainstorming collage. IDEAS, RESEARCH SKETCHES Include adjective listing of your "brand concept" as well as typography possibilities (including heading, sub-heading, body copy, links, etc.), color palette options, photography treatments, graphic styles, logo concepts, and grid ideas. Include, ideas and research. Consider, who is your target audience? Where would you like to get a job after graduation? If you want to be freelancing, what are some sites that are inspirational? Consider, what are other's style and branding? Include screen-shots or links to other sites of inspiration. Include hand-drawn or digital sketches (minimum five). These can be rough wireframes. SITE MAP Create a site map, and put an image on the blog. Digital or hand-drawn. DIGITAL LAYOUTS Digital layouts done in Photoshop or Illustrator. Include an image on the blog. CONCLUSION Project intention and conclusion, how did it go, and what is the future of your site? Please wait until last day of class to write your conclusion. Web Design One Columbia College Chicago

2 > > > > Web Design Basic Principles Screen Display The number of pixels that make up a monitor, width x height, usually a 4:3 ratio. Such as: 800 x x 640* 1024 x 768* 1152 x 886* 1280 x 1024* 1600 x 1200 *most common Designing above the Fold Placing all your important elements and information at the top of a web site, such as: *Title/Masthead/Name of Site *Most important article or description *Links *Navigation *Logo *Indication of what the site is about *Primary marketing message/mission statement *Slogan or tagline *Banner ads Web Design One Columbia College Chicago

3 The term refers to the location of an important news story or photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. This term has been extended and used in web development to refer the portions of a web page that can be visible without scrolling. However, some have suggested that this term is inaccurate as screen sizes vary greatly between users, especially in an era where web sites are viewed with mobile devices as much as home computers. Some simple grid layouts as inspiration for your sketches: Web Design One Columbia College Chicago

4 Web Design One Columbia College Chicago

5 Web Design One Columbia College Chicago

6 Web Design One Columbia College Chicago

7 Web Design One Columbia College Chicago

8 Web Design One Columbia College Chicago

9 Web Design One Columbia College Chicago

10 Web Design One Columbia College Chicago

11 Web Design One Columbia College Chicago

12 Web Design One Columbia College Chicago

13 Web Design One Columbia College Chicago

14 Web Design One Columbia College Chicago

15 Web Design One Columbia College Chicago