Design Concepts- Week 2

Lab 1

Objective: Exemplify your understanding of the principles and elements covered this week by discussing their use in two different websites.

Just as you did last week, locate two (2) websites that make good use of at least two (2) of the following principles and/or elements from the list below (you may choose more than 2 if you wish).

Scouting for Girls

Scouting for Girls

I think there is a symmetric balance, as the upper and lower navigation menus are located on the top and bottom. They are similar in that they are both menus, and have white type on a dark background. There is also symmetric balance where the pink splotch is directly in the middle and extends out equally on both side of the axis (which my mind puts down the middle of the page).I think there is also a bit of asymmetry as the right side of the page is a picture on the regular background, where the two objects on the left are realistic/photographic and heavy. But I think that makes the page look interesting. And it emphasizes the content on the left side of the page. I do think that the symmetry of the upper and lower menus keep the page grounded.

Rhythm through repetition is achieved in both sets of menu s at the top and bottom of the page. There is very little variation within the menus themselves. And I feel the linear look to the menu at the bottom of the page, along with the dark color used for the background, make it look very similar to the top. I think this could look very boring, but in this case I believe the menus are acting as anchors for the page. When you scroll down the bottom menu has a rhythm of its own by forming a series of boxes, unified by the dark tops, typography, and light backgrounds. They have variation in that most boxes have different graphics but of similar size.

Texture on this page is created a variety of ways. The most obvious is that the page sits on a “burlap” background. Texture is also exemplified on the main graphic which holds the band’s name. It looks like one piece of burlap on another. It is also given shadow and edge for a more 3-D texture, emphasizing the importance of that part of the page. It is also ripped, which gives it even more of a textured look.

The log in section for The Wolf Club has many layers (brown puffy envelope, paperclip, paper and burlap) which give this piece a very deep and rich texture. The shadow around the compass gives it a 3-D effect.

Texture is also achieved by giving the menu items a torn look.

Overall I like this site a lot. I like the colors, and I like the use of the one pink square in the middle used to represent girls. The only thing I’m not really crazy about is the fact that there is a lot of fluff in at the beginning of the page, while the really interesting parts of the page (the actual content) you need to be willing to scroll down the page to see. If you’re not really looking at the page you would miss them. I think this exemplifies the need to give people what they want quickly and not to design for design’s sake. The graphical elements, which are interesting, are way too big, and you could miss the really important information located far below. I would make the graphical elements smaller, or take them out as they are not really essential, and put the articles, tour dates etc. on the part of the page that can be seen without scrolling.

Full Moon Graphics


I think this page is very symmetrically balanced. The 2 important elements, the title and navigation menu (yes, those squares are the main navigation menu) are centered on the page.

Rhythm is achieved through the repetition of the square boxes in the navigation menu. There is a lot of variety in that each box has a different picture in it. Because each box is the exact same size, with the same shadowing around the corners and the same beveling, the rhythm is undisturbed even though each individual box is very “busy.”

The background actually has lots of rhythm, with the different sized tiny green circles on the light green background. The background is a pale green, and the circles are very tine and light. I think the background has a very bouncy feel and actually pushes your eyes in to the middle of the page. Also I think the background of pale green gives you a very calm feeling while the little circles are uplifting. It kind of effects your mood without your realizing it.

Texture on this site has been achieved in basically 2 ways. The type on the top of the page is made to look 3-d by giving it a huge shadow. The huge shadow also gives it a very chunky look. The lines inside the letters also give it the appearance of texture.

The navigation squares are given texture by shadows and beveling that gives each square a 3-D effect. Also the entire menu of squares sits on a beveled platform, increasing the look of the texture.


I really love this designer’s work and think she is brilliant. Here artistic ability and use of color are exquisite. If you really look at here work you will see each page she creates is a masterpiece.

However, I think this is an ultimate example of Mystery Meat Navigation. Not only do you have to scroll over the squares to find out what the links are, but the pictures don’t have anything to do with what link will be. And some of the squares with pictures are not really links at all. I would change the navigation maybe by putting the links in text at the top or bottom of the page (there aren’t too many of them, really).

Lab 2

Statement of Purpose for My Site

My site will be educational. It is actually a re-vamped edition of the site I used when I was teaching/consulting on the use of technology in education. It will contain general tutorials for Microsoft Word, Excel, PowerPoint and Access. It will also contain tutorials for more education specific uses of these programs. I will also have detailed lesson plans and projects (with instructions) both for free and for sale on the site.

I can make sure I am successful from the start by implement good design principles from the beginning. In order to do this I have to really focus on who will be using the site and what they want and need. I think for my site one of the key things to focus on will be the navigation, as there will be many areas and things on the site, I have to make sure my navigation is neat, organized and succinct yet complete.

I also think the site needs to be inviting, so people want to explore areas that they may not have come to the site for. Educational sites (by teachers) tend to have a childish look with lots of educational graphics and colors. To a certain extent this is what my audience will expect to see. Of course, professional publishing and tutorial sites don’t look like this. I would like to strike a balance here. I do want it to look like a teacher’s site so teachers and kids will feel comfortable, but I would also like people to buy educational materials. This means the site should also give the impression of professionalism to increase the site’s overall credibility.

Eventually, when the site starts to grow (the old one actually became pretty popular- it had over 200,000 visits with a number of repeat visitors, when I took it down- which I think is a lot for a private site) I would like to expand it with forums and maybe teaching materials for sale by other teachers. This means I need to have a site that will be easy to expand without having to redesign the whole thing.

My audience will be primarily teachers and students. My projects always contained kid-friendly step by step instructions, so teachers would either use the site for ideas, or have their students come to the site and work directly from my pages. I have projects that can be used for students from grades 1-12. One thing I originally forgot was how many international visitors I had. I think this is because I had a translator on the home page. I not only had schools from the US and Europe, but because of the translators I had many visitors who use a Cyrillic and Arabic alphabet. So that will go back.

Lab 3 Objective: Continue building your composite.

First are the side by site shots of comp 1 and 2. A larger shot of comp 2 is below.

Comp 1 Comp 2

Comp 2 Large