Com Arts 155 1st Edition Lecture 8Outline of Last Lecture I. Computer LanguagesII. Digital Technology FundamentalsIII. Film versus Digital CaptureIV. Computer GraphicsV. Clarification of Course ContentOutline of Current Lecture I. Designing for the WebII. Website Navigation & User ExperienceIII. Directory StructureIV. Basics of HTML & CSSV. What’s the Point?Current LectureDesigning for the Web 5 Principles of Good Composition Balance Contrast Focal Point Movement Perspective Golombisky & Hagen’s 3 Building Blocks  Visuals Type Negative Space Effective Graphic Design Captures attentionThese notes represent a detailed interpretation of the professor’s lecture. GradeBuddy is best used as a supplement to your own notes, not as a substitute. Controls eye movement Conveys information Evokes emotion How Web Design is Different from Print Fonts may appear differently depending on browser and computer In Photoshop, you have total control. When designing for web, you give up a lot of that control. How their browser displays the code may differ from how you may imagine Websites are non-linear experiences A lot of times you enter a website not on the home page. Your users are coming at it in different ways Interactive—new content added You’re building a structure as much as you are a site that’s standing aloneWeb Navigation and User Experience Bad Website: GRRM Way too much bright colors with overwhelming purple Colors are really solid and there’s no depth Really cluttered with all the links Brightness and lack of contrast in areas Font could be better Not reflective of the material Name is mentioned so much it’s redundant The clutter itself is inconsistent Not a great picture of him NAVIGATION: way too cluttered; too many things trying to be focal points COLOR SCHEME: Lack of contrast between colors Good Websites:  Kit Hughes: Gives the handmade quality, unique and personal, but enough professionalism Jacqueline Warner: bold name with focal point Abby Schneider: Don’t have to go with minimalism... bold and loud Fraternity: With rule of thirds, try to design banners that can give us a nice third  Site Navigation Rules Keep menu names short, consistent, and limited to no more than 5-6 options Keep menu names consistently located across pages Good planning is essential!Directory Structure Directory Structure Every file on your website lives in a directory on some server Every page and image is going to be in a directory on some computer Hyperlinks tell a client what file inside a directory to access A whole lot of what we’re doing is pointing on things on the web. You can point outwards to another site, but also inwards, within your own site You are already familiar with directories Folder are just a graphical way to represent what a directory is Hypertext link Ways to point to these links. Relative link It links to something called “index.html”. It says that the file is in the same directory that you are currently in. You’re always in a directory. Fixed link You’re being ultra-specific. It’s not just in the directory you’re currently in, but you point to sub directories to get there. This is worse, because you need to create files locally, and upload to web. The file location changes; directories change. If you stay consistent where files are relative to each other, it’ll be a lot easierBasics of HTML and CSS HTML Hypertext Markup Language We’re taking text and marking it up. HTML describes the structure of web pages, and as designers, we separate structure from presentation Elements describe structure and convey semantic meaning- P element. For example, p is a paragraph. That’s the structure. The semantic meaning of a paragraph is different from a list or title or sentence.  The best elements convey structure and semantic meaning. We can style the elements using CSS.- H1: Header 1. Assumption is that you use list them in order of importance.- P: paragraph- Strong: Something significant- Blockquote- Ul: Unordered list News Paper Example When we approach marking up a section of text, use logic so that you structure something like a newspaper H1: The wall street journal ... most important Strong: Describe date H2: Rebels … it’s really important but less than the wall street journal H3: Jubilant …the subhead, less important, but stand out H4: authors P: New stories and text CSS What does CSS stand for? Cascading Style Sheet- While HTML is a markup language, we know that CSS is a styling language. Cascade is important, the way the styles are applied Summer 2004. Evanston, Illionois His boss showed him www.csszengarden.com: They gave HTML document to designers, and told designers to modify with different CSS CSS is powerful in that you can write a rule that can be applied to multiple pages Basic Anatomy of a CSS Rule We take an html element (h2) and make a series of declarations about it- If you don’t do this, things will still display on your computer, but it will just display on computer defaults- Browser has standard defaults… as designer you can overwrite them Try thinking of CSS this way Element called tie. Color is pink. Knot: four-in-hand; pattern: tile Can change property to yellow, but change knot to Windsor You have an element (tie) and then you can change the properties and values using CSS. It can make a change across the whole site Why does the “cascade” matter? The last rule applied wins. When you’re doing coding work, you’ll run into cases where there is some kind of conflict. When there’s a conflict, the last rule applied will win. You can use this to your advantage, because in some cases you can create fail-safe fallback rules Box Model Idea is that in CSS, everything exists in an invisible box. Content goes around an element Padding is the width outside of the content box and inside the border Border is the edge of the box: you can give solid borders or invisible ones Margin is the end of one box and the beginning of another What’s the point? Become better observers of the world See things in advertising that we haven’t before and can begin to understand it differently Become Creators We can do the work ourselves Synthesis of