This quarter, every Monday from 6:00-9:45, I’m also in Web Scripting: CSS with Domanique Burr. The class covers website design using cascading style sheets and strategies for effective web design.
“This course will focus on both web scripting and design. Throughout this course you will be pushed to think about what makes a well designed website. Remember: CSS is just a tool. It’s what you do with it that matters.”
Course Outcomes:
Here goes…
Web Scripting: CSS Week 1 Homework (part 1) -
In your journal, create 10 wireframes that copy the layout structure of pre-existing websites. You could sketch the Yahoo! homepage, or the Google News page, the Facebook Group page, or the My Little Pony’s site. The purpose of this exercise is to understand their structure and layout. If you use color, be sure it is minimal, only demarking important areas, or links, for example. Label each wireframe with the name of the site and the URL that you are sketching. DO NOT REPEAT SITES.
Adventures with HTML5 templates and CSS Resets:
Today was a gratifying day. We quickly recapped the week 1 class topics, created a HTML5 template (very useful), talked about INHERITANCE, made a CSS RESET, covered the BOX OBJECT MODEL, and were introduced to LAYOUT. Then, we created a website using CSS and the HTML5 template out of the pre-existing photoshop comp on the left. Boom!
EXPERIENCE WITH GRIDS
I recently read this article on grid-based design and six creative column techniques to try, by Sean Hodge. I found the article to be very interesting, especially the bit about chaos being more interesting than order (I felt compelled to tweet this). I don’t have much experience designing using grids, aside from a small portion of a Dreamweaver class that I took a few summers ago. However, I do use power point more than I care to admit, and I discovered many familiarities when Hodge talks about deviating away from the common grid structure to create visual impact. As a consumer of articles, posts, and news on the web, I tend to prefer pages that employ clean grids. Grids make the pages easier to scan, so I can quickly decide which articles or posts to read and which to skip, like on Creativity-Online. When shopping online, I prefer pages with grids for comparison purposes, such as on Madewell’s denim bar page. Sometimes I even find grids themselves to be visually-appealing: my best friend Dana makes a grid look interesting on her site. Now that I am trying, I can’t think of an occasion where I would not prefer to look at a well-ordered page - I guess that makes me a fan of grids! I hope I will find it easier to code using grids as well…
An iPhone wireframe made with Omnigraffle - OPI.com (because I just got my nails done and I’m running out of sites to wireframe)
An iPhone wireframe made with Omnigraffle - Samsung.com (because it would be really awesome to have a nice, new, huge Samsung display)
An iPhone wireframe made with Omnigraffle - Apple.com (I realized that I always visit apple’s site on my computer and never on my mobile - weird)
Web Scripting: CSS - Final
The project will be a small brochure website for a local business. The business could be a comic shop, a Portland non-profit, an after school service, a flower shop, or a cleaning service, you name it. But the business must be small, independently owned, and preferably local.
The Final will consist of 3 pages:
The site will also have the following elements:
