HTML Portfolio Gathering Material n Basic Design n

HTML Portfolio Gathering Material n Basic Design n Effective Content n Usability and Testing n Ethics and Credibility n

Requirements Gathering n Site Owner’s goals ¨ What n Site User’s goals ¨ What n do you want? A job matters to that specific employer Human and Technical Resources ¨ What can you do? ¨ What can the host server do?

Requirements Gathering cont. n Possible content items ¨ Writing samples (PDF) ¨ Audio/Video resume ¨ Projects ¨ Resume ¨ E-mail links to references ¨ Ect.

Basic Design n Sitemap n Information Architecture ¨ How many pages? ¨ What goes on each page? ¨ How do you get from page to page?

Basic Design cont. n Wireframes n Sketch of the basic page layout ¨ Header ¨ Text ¨ Links ¨ Images

Basic Design cont. n Visual Design n n Accessible Useable Relevant n n n Color Layout Shapes Words Images

Basic Design cont. Attention and Focus n Guide to content n Show the context n Show impact n Sets tone and mood n Define the audience n

Basic Design cont. n Consistency n Simplicity n Color scheme Page layout Size and spacing Basic geometric forms n Minimalism n Content is the most important thing! n n n

Effective Portfolio Content n n n n n Focused and concise text Strong verbs and active voice Lists Meaningful headings, sub, and summaries Avoid hyped language Highlight key words Orient to context of each piece Talk about purpose, goals, skills and tools used Draw to the key elements Emphasize problem solving

TEST…TEST Plan n Get people to look at it n Make sure pieces are ready n Ask for specific feedback n Revise n Test n

Ethics and Credibility n Credibility is earned Accurate info n Convince visitors that you know what you are talking about n Focus on user’s needs n

Web Design Software With the expansion of the Internet, software developers released products in n What-You-See-is-What-You-Get (WYSIWYG) environment n Early web sites created by programmers with little knowledge of graphic design n Early sites text-based, little graphic content n

HTML versus WYSIWYG n WYSIWYG Web Design programs simplified web site development ¨ Web design became as easy as page layout in print ¨ WYSIWYG programs automatically generate HTML code necessary to create a Web site n Late 1990 s: introduction of Dreamweaver ¨ Create sites with dynamic and interactive content ¨ Designers not required to learn HTML code

Macromedia Dreamweaver WYSIWYG interface n Dual-window layout for code and design n Apply hyperlinks (areas on page that users click to display other information) n Image Maps (areas of graphics act as links) n Create Rollover buttons (button changes appearance when cursor moves over it) n Cascading Style Sheets (consistent styles) n

There Has to Be Content Text and Graphics handled differently on the Web than in print n Type in HTML not as flexible as Post. Script n Seven HTML-based type sizes n CSS allows for some control over leading n HTML allows different type alignments n

Text and Type Basic HTML does not let you set line length n Limited type style choice n Limited number of default font styles are used on Web to accommodate both Macintosh and Windows n Web fonts fairly generic n In order to have creative type, must first convert it to a graphic n

Photography on the Web Photographic images need to be optimized n Concern for quality must be balanced with need for image to download quickly n Download speed: the time it takes for an image to transfer from a Web server to be displaced on a user’s computer n

Graphics on the Web Graphic images include branding elements and navigational buttons n Branding elements: graphics on a page that identify a company, or organization n Banner or Masthead: top of the page with company name and logo n Navigational buttons: combination of type and graphics that link pages in site n

Graphics on the Web graphics can be interactive n Many web graphics contain movement n

Content Creation Software Vector-draw and image-manipulation software generally create and optimize a wide variety of graphics for the Web n Creating content is the core of Web design n

Start the Site Development Process Preliminary ideas before site development n Ideas hand-sketched or via computer n Need site layout to show number of pages, how pages are inter-connected n Having page layouts before starting Dreamweaver speed up production dramatically n