Tuesday, February 28, 2012

Due Thurs, March 1: One set of photoshop designs

At the beginning of Thursday's class, you need to have two pages mocked up for your website, in photoshop: one homepage, one second-level page. The design should be consistent across the two pages. We'll take a look at them in class.
One website design I like very much is from statebicycle.com

1) I like how basic and easy the homepage is to navigate around, yet it still looks very clean and professional
2) The all white background makes everything else seem to pop out of the page since all the boxes are black with white text, they complement each other very well
3) There also seems to be no wasted space, whenever the content ends, the page stops, there is no unnecessary white space.
4) Another main content I like is that there is hardly any text throughout the site unless it is needed, it is basically just pictures of their products, again keeping it simple and easy to navigate but in a very successful way.
5) Also, whatever header you click on in the navigation bar pops up bigger at the top of the page when you click on that so you never feel lost and know what content you are looking at or where on the site you are at, and it is very easy to get back to the home page or search exactly what you are looking for without having to click multiple links or drop menus to finally get to what you are looking for.

La pub anti-Mc Donald choc diffusée aux USA

<iframe width="420" height="315" src="http://www.youtube.com/embed/nGRCQn2Af-c" frameborder="0" allowfullscreen></iframe>

Saturday, February 25, 2012

Annie Mac: Elements

1) Newschoolers: The login page displays photos uploaded by users. There is a different photo everyday.

2) Newschoolers: The video of the day feature on the home page.

3) Transworld: The lightness of color choice for the home page. It seems more “open.”

4) R-e-l-i-c.com: Use of large photos. This is important to me because of the visual aspect. I want more photos, less text unless it is an article.

5) Newschoolers: simple border colors. I’d prefer less shocking contrast between the yellow font and the dark background.

6) Newschoolers: The main image box in the top left is ideal with scrolling images/events/videos.

Thursday, February 23, 2012

Michelle Mattingly - Design Elements


1. Very crisp and clean, however, I think it is lacking in texture and feels very sterile. Might be well suited for a hospital or medical setting but seems to lack humanity for a service company.
2. Minimalist - nothing is distracting the viewer from the information at hand. I think it is good that there are no distracting flashy ads or images.
3. Color palette is boring, BUT it is consistent which I like.
4. Font size is varied from section to section which seems to separate sections from each other well without having really defined "boxes".
5. I like the icon elements of their drop down menus for "Home" and "Business". It makes these menus much more interesting.

Assignment for Tuesday (2/28)

At the beginning of class Tuesday, one photoshopped design for your homepage is due.

In addition, download the a case study on copyright and fair use here. We'll be discussing the case study next class. It's about intellectual property rights, particularly in light of digital media and the internet as a distribution system.

For this class, you won't be answering all the questions at the end of the case study, just Part 1. A and Part 2. A, the questions below. Write your answers and have a printed out version to hand in to me during the class.

A. Explain how your solution defines/ interprets “transformative”? What is the intention of this language? Where is the line between “sufficiently” transformative and “not” transformative? Consider the social benefits and costs of your solution

A. Lay out how, in your solution, the proposed language modification would work in practice? Who will determine “transformative”? Would a new office be assigned this task or can it be absorbed into current duties? What would it allow in terms of creativity? How would artists, record label companies and music publishers be guaranteed satisfactory compensation? How would artists, individuals and groups get access to material?

Marvin Joanis


1) fun, vibrant colors very bright makes it feel like play time
2) the font is drawn out of proportion to give the playful kidish feel to the site. portrays drawing outside of the lines.
3) a lot of the boxes have been altered to take away the "boxy" effect. some boxes still in place to give it some sort of structure.
4)limited use of words the majority of the pictures are links and notify you when selected or hovering over. Pictures correlate with link destination
5) The background color fades to a darker duller shade allowing the links to pop-out to the eye.

Wednesday, February 22, 2012

Richard Gire - Favorite Website Elements

After viewing dozens of attorney websites, I have settled on the site of San Francisco law firm Walkup, Melodia, Kelly and Schoenberger.

The five things I like most about the site and hope to replicate are:

1)  The overall look of the site.  It is extraordinarily classy and inviting.  There is very little clutter.  I'd lose the gigantic map that is out of place when you scroll down.

2)  The palette.  Way too many firms use blues.  The light browns look traditional and professional but also have a softness to them.

3)  The fonts.  They are simple but very pleasant on the eye, easily readable and professional in nature.

4)  The image bar below the menu bar.  Three panels of well-crafted legally-oriented photos that feature the same brown palette compatibility.  Under "areas of specialty" on the drop down menu bar, the gavel is the left anchor, while other photos related to the area are delivered to the right.

5)  The drop-down menus.  The same nice brown color scheme.  Nothing fancy but the fonts change from white to black when chosen.  Again, easy to read and accessible.   

Tuesday, February 21, 2012

Alex Granelli
Dupont and Co

The primary attraction of this website is the seemingly simple design.

1. The palette is composed primarily of black and white with very few colors. This is interesting for a visually important site that isn't meant to provide tons of information or text.

2. The images and text float and shift over the background image. This works very well with the particular background that allows a lot of open space.

3. The background has lines that feel organic and break away from the box form.

4. Everything is visual, this website is not supposed to replicate reading a book.

5. The links are clear and descriptive, some unique names give it a less boring feel.

It's almost like visiting a picture that has links posted over it, a much different feel from most websites.

Brett Varga


1. I really enjoy the simplicity of the site, It lets the images breath and keeps itself from being convoluted.
2.The way the side navigation is aligned on the left side feel very formal, because it's the way you would naturally read a book.
3. The hand drawn nature of the the side nav. is pleasing to the eye. It has a way of making the site seem more organic and less robotic.
4. The humor/ tounge and cheek nature of the site is what makes the site from being boring. Finding the right mixed will be challenging to say the least.

Kirby Hunt


1. I like how the images on the homepage are large and have a slide show effect.
2. Also the bottom of the image is broken up with a mountain shape to eliminate the boxed look.
3. The drop down menus and navigation is easy to use.
4. I like the the video they have half way down the homepage.
5. The weather conditions in the top right corner of the header is pretty cool.

References for Tuesday, 2/21

Now we'll take your wireframes to the next step – actually doing layout and design, using the content you set down in the wireframe as a guide. Ultimately, I want to see two distinct design variations for your site, and I want to see a homepage design and a second-level page design (since you're making two contrasting designs, this will total 4 pages of design mock-ups: style 1, homepage and second-level page, and style 2, homepage and second-level page).

Before starting on your designs, I want you to make a post on this blog, focusing on the design of one site that you flagged as being in the genre of the site you're making – pick the one that has the most appealing design to you. In the blogpost, list out at least five specific, concrete elements of that design. I'd like you to use those elements as a sort of guide for one of your designs. It's important that you can identify the successful elements of that design – without duplicating the design itself. This is basically an exercise in slowing your eye down, and helping make you more aware of design choices, so that you can be more conscious in your own design choices.

Once you've worked out one design, I want you to start on a design where you're making deliberately different choices, for a different look and feel. Some areas to focus on could be:

Different palette
Different font choices
Different layout of elements
Different images or relationship of images to text

Here are some resources that we'll look into during class:

The 960 Grid System

960 grid examples here

Breaking out of the grid



Free stock photos

A good guideline for the "above the fold" dimensions of your site would be 960x600 pixels.

Thursday, February 16, 2012

Wednesday, February 15, 2012

References and downloads for Thursday, 2/16

The CSS Box Model:


The position declaration:



Positioning elements with CSS:


CSS Positioning Tutorial below. Note -- there are a couple glitches in the directions. Step 11 should say "{h3}Sidebar" instead of "{h2}Sidebar." Step 17 is completely erroneous, and will result in a file where the bottom of the content in the sidebar will push down all the content in the "Maincontent" div from the second header. Instead of following the directions on the pdf, do the following:

For the CSS rules for the "maincontent" div, add a "float left" property. In order for the text in the "maincontent" div to have some space between it and the sides of the div, add 20 pixels of padding to the left and right margins. Add 5 pixels of padding to the left and right margins of the "sidebar" div as well. Finally, add the "clearfloat" class to a "br" tag just before the footer, following the directions at the bottom of page 14.


The start.html file to begin the tutorial:


Follow this tutorial to page 17 only – disregard the last three pages.

Tuesday, February 14, 2012

youtube clip

Materials and reference for today's class (2/14)

An intro to the Dreamweaver Interface:


Today, in class, I'd like you to choose an html template from Dreamweaver (one of the two-column options with a header and footer), and re-style several elements. Don't just change the elements in a random manner – try to make all your styling cohere into an attractive design. There are at least six elements I want you to alter:

1. Insert new text, instead of the Dreamweaver "dummy" text. You can use Lorem Ipsum text.
2. Style the text differently.
3. Change the margins and/or padding on some elements.
4. Insert a few links in the text, and change the styling of the links.
5. Insert at least two images, and "float" them relative to the text.
6. Change the background color of all the elements (header, footer, sidebar, content).

Thursday, February 9, 2012

Assignment for Tuesday (2/14)

For next class, please have a wireframe for the site you're going to make. You will hand in four pages total.

I want to see a wireframe of the homepage, and a second-level page.

Then, I want to see another version of that homepage and second-level page, with you re-thinking the "buckets" (the titles for your navigation, and perhaps even some of the organizational logic behind the categories for your "buckets").

Youtube clip of the day

Tuesday, February 7, 2012

Web Class Canceled Tonight (2/7)

Apologies to everyone – I have to call class off tonight. My daughter's under the weather, while my wife's out of town, and the babysitting fell through. If you'd like to use the lab to work on any of your homework, find Sheri or Rick on the first floor of David Hall, and they can let you in. See you all on Thursday.

Thursday, February 2, 2012

Resources for Thursday (2/2)

Using list elements to make a nav bar:


After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:

1. change the names of all the nav buttons, and make them all external links to actual websites.

2. change the font face in the nav bar.

3. change the color of the nav bar, including in the "hover" state.

4. change the dimensions of the padding on the nav bar.

Your assignment for Thursday's class is to have:

1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):

2. Make a website flowchart as well (you can do a google image search for "website wireframe" and "website flowchart" to see examples).

 A flowchart example (click to enlarge):

Be ready to talk about the sites you analyzed (via drawing up the wireframe and flowchart) with your fellow classmates next class. Write and print out a list: what were the elements you liked about the site? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?

I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes. There's a tutorial here that has some good time on wireframing in Illustrator.

Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Just make sure the names for all the navigation and content are legible. It might help to use graph paper.

The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. And since most sites have homepages that function differently than their interior pages, it's necessary two have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.

A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.

The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).

Trevor B Jackson: MHMM Productions

I want to create a new, more in depth version of our already existing productions company's webpage - www.mhmmproductions.com I plan on adding more contact information, more archived videos accessible through the direct page itself, as well as including widgets for our social network pages ie twitter, facebook. and for our vimeo page which hosts our HD videos. I like simple and clean with very minimal parts to the page.




My Favored Web Designs

The main goal of this class is for me to create a website for self promotion. I have one currently built at TuckerNorred.com that was useful for promoting me for snowboarding to my sponsors.
I would like to build a blog that holds many features within it. Also, I would like to shift the direction of my website from a snowboarding focus, to a website that promotes me in all aspects. As of recently I have been filming an producing lots of video that I would like to promote on my site.
I would like the homepage to act as a blog with many other tabs that include: Micro-Blog, Videos, Pictures, Bio, Snowboarding, and Resume. Something special I would like is for my Micro-Blog is to be able to update it while mobile(such as on my phone).

These are some examples of some website that I would like for mine to look like.


For my project I would like to create a website to display my personal portfolio. It would like to create a site where content can be added easily, allowing me to keep it up to date. The purpose of the site would be to have a reference for people looking for a graphic designer.

Vimeo Clip of The Week

Kirby: BC-Heli-Ski.com

Company: BC-Heli-Ski.com

Mission: BC-Heli-Ski will be a marketing organization that will consist of all the major heli-ski companies in British Columbia. Through our marketing and the cooperation of the companies that will be using our service, we will drive the destination visitors interested in heli skiing to British Columbia. My company will do advertisemtents, promos, public relations for the region. In essence we are advertising for the industry not one company. Therefore, the entire industry will benefit from this service and profits will be evident in the companies that utilize my service.

Websites that relate to my site:

Brett Varga: interwebs

I plan on creating a site that showcases my art, and creates a social commentary. This will stay up to date with issues or events I want to express opinions about. Also I would like to create a "forum" on the site for people to talk about art,life, etc. People could also post art they want to be seen and have the opportunity to sell it.

Here are some sites that have similar elements or may inspire the design of my website:

Wednesday, February 1, 2012

my website

  In lieu of the normal curriculum for DART 305, I wish to continue development of www.emeraldcitylan.com. This website is the face of the LAN gaming event, Emerald City LAN (ECL), in Seattle, WA, and is in desperate need of a face lift.

  The website is a project of mine that I am doing for my brother and his friends, whom are the heads of the ECL event. While the backend of the website does everything as requested, the theme leaves something to be desired. Given time and tutelage, an attractive theme can be created, which will benefit the event (as an attractive package would benefit any product).

  Over the period of the semester, I am hoping to learn web design practices and how the size, placement and boldness of elements affect the overall layout and usability of a site. Ultimately, possessing this knowledge will aid ECL and any other websites I may work on in the future.

  While there are not many large LAN events, a few similar sites are:

Annie Mac: website

This summer I was working 60-hour weeks in Martha's Vineyard, MA. It was my day off and all I wanted to do was watch some snowboard edits with girls riding in them. I did not find anything actually worth watching. I enjoy watching snowboard videos and edits but as a girl, I can physically relate better to how a girl's body moves while she is snowboarding. My search turned up nothing worthwhile. The website I will create is going to change this.

I'd like it to follow the design of Newschoolers.

Having to choose some others, I'd say:

Transworld Snowboarding, although they were a huge let down as far as female riding goes. The site itself is aesthetically pleasing, more so than Newschoolers.

Lipstick-productions, which is a site consisting of some European female riders. This is the production company that has the only well-edited video of all-female cast of riders. It's called 5 More Minutes Please?!

You Tube's home page after you've logged in is great, listing your interests, subscriptions, and recently viewed videos.

My Yoga Online, so easy to use.

Since I 'm in school here , I'm looking for a way to communicate with my family and my friend back home. I'm tired with facebook and I'm not using it anymore;
So far I'm stocked but I would like to create something close to this kind of site, sharing picture and my feelings, that's it.


Web Design Project - Alex Granelli

I plan on creating a simple website with a very specific theme that will host videos and pictures of various local sports/athletes. The site is merely for personal interest and having the ability to share content with anyone interested. My audience is made up of people mainly in my peer group, although anyone who is interested in the sports will be included as well. The site is simple and will not have much more than pictures and video. Each athlete may have a short bio, but there will not be much text. I believe the majority of the work will be in creating a sleek and complementing theme which goes well with the pictures and video.

Here are five sites which have similar themes:

1. Redbull- Adam Raga

2. Julien Dupont

3. DC- Ken Block

4. Abdo Feghali

5. David Knight

I would like to use styling elements that are similar to those represented above.
Website Design Project - Richard Gire

I plan on creating a website for my Truckee law practice.  Five websites of competing law firms follow:

Local Competition #1

Local Competition #2

Tough Reno Competition

Not As Tough But I Like Some Features

My Buddy's Large California Firm

Website Design Project - Michelle Mattingly

I plan to design a website for a commercial janitorial company. The main goal of the website will be twofold:
1) to function as a marketing tool for potential customers, including information/background/experience about the company, services/programs/products offered, and contact links to request information/estimates.
2) To interface between the company and existing customers for the purpose of customer service such as payments, reporting issues/complaints, purchasing products.