Web Essentials
-
Image Rollovers with CSS
A easy way to create interactive features on a website is the simple rollover. A common device for revealing information or making links or a call-to-action more enticing and clickable, the rollover is used in a variety of ways. First we’ll be looking at how to create a simple text rollover using CSS. 1. The…
-
Assignment 2: Portfolio Website
This assignment entails designing and creating a personal web portfolio for you. You will need to identify your main goals for a portfolio and gather relevant content to showcase in this website. This project will follow that standard web design process and include any process documentation including Creative Brief, Site Map, Wireframes of key pages and…
-
Publishing to the Web (FTP)
It’s thrilling to finally publish your work to the web, imagine the whole world can now view it. For most beginners, the step of uploading that content to your hosting server seems to involve some magic. Don’t worry, this step is incredibly easy, once you understand what’s going on. The first thing you will need is…
-
HTML III: layout
These days we use the div tag to establish areas of content in an HTML document. For a while there, we were using the Table tags to help us align and position elements on web pages, but it was a bit of a hack and thankfully some standards were introduced. The div (division) tag is…
-
Images for the Web
Four main considerations for optimizing images for the web 1. Colour – images need to be in a standard monitor colour -sRGB 2. Resolution – images must be 72 ppi (pixels per inch) and it is important to consider the pixel dimensions of any image. 3. Actual File Size – optimizing images for the best…
-
Sitemaps
-
Information Architecture
Here are a few definitions of information architecture (IA): The combination of organization, labeling and navigation schemes within an information system. The structural design of an information space to facilitate task completion and intuitive access to content. The art and science of classifying web sites and intranets to help people find and manage information. A…
-
HTML & CSS
Video Intros 1. Google’s Intro to HTML 2. W3 Schools Intro to HTML Our goal is to make a simple web page and upload it to a web server to publish it to the web. ONE: Simple Tags TWO: Simple Layout: http://www.w3schools.com/html/html_layout.asp THREE: Publishing (understanding FTP) Articles to read: Intro to CSS at W3Schools Introducing New CSS…
-
Assignment 1: Interactive Poem
Create an interactive piece with one of the poems below. Choose a poem, analyze it and design & build an interactive interpretation of that poem. Explore the use of expressive typography, visual metaphors, symbolism and interactive devices to accentuate certain meanings or add new meanings. Sleeper – Luz Helena Cordero Frog! – Umar Bin Hassan The…
-
Web Design Process
Plan a. brief goal, intended audience, what b. research content gathering competitive analysis target audience research: i) demographic: age, gender, language, ii) psychographic: culture, slang, interests iii) technical: device, screen size, browser Design Information Architecture (illustrator) – Sitemap – hierarchy (prioritization), structure, user-flow – wireframe diagrams Mockup – Photoshop – colour, typography, motives, layout, grid
Got any book recommendations?