11A Webpage Layout Project



Shape Map

11A_ShapeMap_Susan Ruske



11A_ Sketch_SusanRuske



I started out with about 6 sketches.  Then I created my Shape Map.  The original one was not cooperating, so I recreated it so the shapes would stand out more.  I used a grid layer which is now hidden.  I started when one design and after critiques it evolved slightly different.  I really like how the picture collages stand out and separate the header from the footer.  My links are strung across the top and bottom of the page appropriately.  I created a small Texas logo and copyrighted my design.  The theme I chose was Relationships.  No matter what kind of relationship a person wants, the only way to accomplish this is by investing your time and communicate positively with the other person or group of people.


For my instructor, Julie Peterson, she said, ” I love The background and the images, the typography looks great. The images are good quality. The main things I would change is making sure you’re holding shift when you’re resizing your images, Some of the images are out of proportion. Make sure that you are releasing your mouse before you release the shift button when your resizing that will make a difference as well. And it looks like you’re trying to go for the asymmetrical look, but it’s feeling a little unbalanced. What if you made one of those images large and taking up the majority of the space and three of the images small right below it? Remember do you shapes and clip your images in there and you can make One image really long. Play around with that and if you need me to critique it again let me know.”

From my classmate, Matt Sievert, “I like the design. Maybe try and contrast the different sections. Maybe it’s just because it’s in a picture and not on a website but I feel like your different sections (top, body, footer) aren’t defined. Also you may want to add some text in between the photos”

I did change the picture layout around and ended with more of 2 two collages.  I added a quick thought about communication and time.  I understand Matt’s thoughts on the sections, but i really like it this way and feel they do well.

Color Scheme

I used a blue monotone color scheme which carried over in the pictures slightly and added a gradient.


On the Title I used a slab serif ~ Calisto MT Bold 6 pts.  One the links I used a sans serif ~ Arial Narrow 3.31 pts. and in the footer I used the same sans serif ~ Arial Narrow 2 pts.




[ File # csp5474137, License # 2646595 ] Licensed through http://www.canstockphoto.com in accordance with the End User License Agreement (http://www.canstockphoto.com/legal.php) (c) Can Stock Photo Inc. / 4774344sean(http://www.ankleyhealthinsurance.com/wp-content/uploads/2013/08/family-on-grass-canstockphoto5474137.jpg)




Portrait of happy business team interacting in the office(http://www.kaliskleiman.com/images/iStock_000004804659Medium.jpg)



4 thoughts on “11A Webpage Layout Project

  1. Susan, Your website has a great visual appeal the gradient blue background is my favorite, your images blend very well with the look of you page. I also liked the font and your use of asymmetry it balances your page nicely. I also thought that was a creative topic” relationships” well done!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s