Com Arts 155 1st Edition Lecture 8 Outline of Last Lecture I Computer Languages II Digital Technology Fundamentals III Film versus Digital Capture IV Computer Graphics V Clarification of Course Content Outline of Current Lecture I Designing for the Web II Website Navigation User Experience III Directory Structure IV Basics of HTML CSS V What s the Point Current Lecture Designing 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 attention These 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 alone Web 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 easier Basics 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 Different Tools