.the.codex. 2nd AUGUST – 17th SEPTEMBER (7 WEEKS) (40%) LECTURER: PAUL STEVENSON TUTOR: JENNI HAGEDORN, ALEX RAMAEKERS .design.challenge. A portfolio is an expression of yourself, your work and the direction to which you are aspiring. It is something which is in need of constant editing and refining, it needs to evolve with you, always reflecting your current position and direction. Your design challenge is to create a portfolio which you can update and change as required. For the purpose of this project we will use CargoCollective, an innovative website which supports the creative and design industries by offering free hosting, customisable websites and templates. This site will be a reflection of yourself; it will become your online identity. It will act as a “hub” to a range of online mediums; blogs, issuu documents, videos, social networking, online communities, forums etc. Consider what you are saying about yourself with each addition you make, not only via which projects, but graphical quality/style, additional content and descriptive language used. Your site will be built through the CargoCollective platform and consist of a minimum of three projects plus a personal overview. The focus of the project is not on what you present (ie. your projects) but rather: How the elements (projects, feeds, videos etc) of your site, work together to form a cohesive identity The way in which your work is presented from a design perspective How you allow the user to navigate / understand your work
.project.objectives. Generate a particular concept in response to the design challenge. Ability to present a concept convincingly through drawings and comments. Create a methodical approach to explore form, size, interaction and layout. Introduction to web based coding, HTML, CSS Consideration of user interaction and interpretation
.procedure. STUDIO ONE: Activate your Cargo Collective Account via instructions on the firstyeardesign -> 112 Blog. Begin searching for precedent websites, take screen shots and post to Tumblr (remember to also link to the site) critique these precedents, why have you chosen them? Consider: graphic appeal, interface, range/type of content, what are they communicating? STUDIO TWO: Continue to research precedents.
Select 3 of your own projects you think are strongest / best represent your interests. Do you need to take time to change how your projects are presented? i.e should you re-photoshop your photos / retake them? What content do different projects offer? (physical models need photos, digital modelling needs to be rendered, should you include work from sketch books/blogs? Do you want to include screenshots of development?) STUDIO THREE: Begin mapping out your website. Think how the pages will be linked, will you use tumblr feeds? vimeo feeds? What will your interface be? Begin drawing / sketching ideas of how the pages work together. Consider the visual quality to want your site to have, will this enhance / detract from your work? Look up CSS tutorials. Look at Cargos preset themes, you can look at their CSS coding for ideas. Find out what you can / can’t do, how will this affect your design? STUDIO FOUR: While continuing tutorials on CSS, consider your concepts. Refine them, are they communicating the correct ideas? Discuss this with your tutor. How will the limitations and benefits of CSS enable / disable you from completing your goals. STUDIO FIVE: INTERIM PRESENTATION 15% (MANDATORY) You will present your precedents, concepts (either sketches and/or photoshopped layouts) of the overall interaction, aesthetic and ideas you want your site to convey, plus crafted images showing the three projects you will exhibit on your site. This presentation is only at a concept stage and the work presented in not expected to be final, however it will be graded and is expected to be adequate to communicate your intentions for the final submission. This work will be presented on your tumblr blog in studio: - Precedents (2 precedents minimum) - Concepts -- Interaction / aesthetic / idea (4 images minimum) - Three selected projects (3 images minimum) STUDIO SIX: Begin developing your Website in Cargo Collective and/or Photoshop. STUDIO SEVEN: Continue developing your Website in Cargo Collective, discuss your work with tutors and fellow students. STUDIO EIGHT: Continue developing your Website in Cargo Collective, discuss your work with tutors and fellow students.
STUDIO NINE: This is your last studio before hand in, keep working on your Website in Cargo Collective. Is your blog up-to-date? Is all your development on it? Have you linked your 112 Blogs Feed into your website? STUDIO TEN: Presentation in class on September 17th during your session
.submission.requirements. HANDIN TO BE COMPLETED PRIOR TO CLASS 17th SEPTEMBER STREAM A DUE 0830 STREAM B DUE 1030 1 Cargo Collective website 3 “projects” presented on site 1 Design overview of yourself 1 Tumblr blog (feed into Cargo Collective Website) 1 Interim Presentation 3 Conceptual mind maps of interaction / aesthetics / interconnection of pages 6 Development slideshows
.assessment.criteria. Evidence of a wide range of development concepts Effective use of an aesthetic to create a cohesive website which is clear, understandable and interesting Effective use and experimentation with navigational system Ability to demonstrate the selective incorporation of external data, (blogs, photo streams, twitter feeds, etc) Quality and craft in website, graphics and coding
.software. Adobe Dreamweaver CS3 Adobe Photoshop CS3 Cargo Collective
.useful.links. http://w3schools.com/html/html_intro.asp http://w3schools.com/css/css_intro.asp http://w3schools.com/css/tryit.asp?filename=trycss_default http://www.cargocollective.com
-
HTML Introduction CSS Introduction HTML + CSS Example Cargo collective
.reading.list. Author Tom Arah Studio 7.5 Bruce Wands Lon Barfield Max Bruinsma J. Nielsen, H. Loranger Steve Krug J. Nielsen & M. Tahir
Title Webtype Digital colour for the Internet and other media Digital creativity : techniques for digital media and the internet Design for new media : interaction design for multimedia and the Web Deep sites : intelligent innovation in contemporary Web design Prioritizing Web usability Don’t make me think : a common sense approach to web usability Homepage usability : 55 websites deconstructed
Call No. TK5105.888 A659 W T385 D574 QA76.575 W245 D TK5105.888 B249 D TK5105.888 B892 D TK5105.888 N669 P TK5105.888 K94 D TK5105.888 N669 H
-
-