In class this week we learned about basic website layout rules using the C.R.A.P. guide. C.R.A.P. stands for Contrast, Repetition, Alignment, and Proximity. Websites can be designed and laid out in a variety of formations, and some designs will work better for certain types of sites depending on the service or information you're trying to provide. There are many helpful sites online that give valid information and suggestions when creating sites, along with a plethora of examples. I will be using the information I find and apply it to my individual website layout and discuss how certain layouts will work better and why.
In an article titled "10 Rock Solid Website Layout Examples," Joshua Johnson discusses how keeping it simple is the best route to take. If a viewer is overwhelmed by options, movement, colors, link, etc., they will have a harder time being patient and allowing themselves to continue to browse the site. Simplicity, with the vast amount of information available on the web, is the number one thing to keep in mind when designing a page. For my site, Kayla Lynn Photography, I'm going to be using a lot of photos. I want to be sure that I present the photos in an eye catching way that wont overwhelm the viewer. Johnson wrote, "Page layout is equal parts art and science," which I think is an important note to keep in mind. The art is the most obvious appealing part, the face of your page and what you want people to notice first. The science part is how it's arranged and how that is pleasing to the eye, even though some people may not be actively noticing it. The correct combination of them both will allow for a visually stimulating but organized at the same time. A specific note that Johnson makes in this article is having a prominent photo on every page. If all the photos you present are the same size, the eye wont know where to start. However, if you have one photo that is 2-3 times the size of all the others, the eye will automatically catch that one first, and then follow along the page more fluently.
I've discussed simplicity as far as layout, but this rule also applies to the amount of written text/information you supply to your viewers. Keeping the amount of text limited, according to an article titled "Web Site Design Tips," will give viewers the concise information they're looking for, while minimizing the clutter that the appearance of text can have. For my photography page, since the main focus will be displaying a portfolio of images, I will be keeping text to small minimum. The 'About' page will have the most text on it, explaining who I am, what I do, and what I offer. Other than that, the text on other pages such as 'Seniors,' 'Weddings,' and 'Family' I will have a sentence long intro about the section and then keep the rest of the focus on the photos.
In class we've been developing a logo for our page, and due to the fact that my logo will be used for my actual Kayla Lynn Photography business, I want to be sure it's something that represents my style, is modern, and can be used in a variety of sizes and still be legible. I've been experimenting with the letters "KLP" for the logo. According to an article titled "9 Tips for Web Layout Design," having a logo is crucial. It's a way to universally recognize your company through unique symbolism. If someone visits my site and my logo, and then sees a photo watermarked with that same logo on a different site, they'll most likely make the association between the two. A logo acts as the identifier to your company and making it memorable, simple, and unique is crucial for visitor to take note of it.
Sources:
"9 Tips for Web Layout Design." Blur Designs. 22 Mar. 2012. Web. 19 Oct. 2012. <http://blur-designs.com/blog/9-tips-for-web-layout-design/>.
Johnson, Joshua. "10 Rock Solid Website Layout Examples." Design Shack. N.p., 16 Feb. 2011. Web. 19 Oct. 2012. <http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples>.
"Web Site Design Tips." Great Web Design Tips. Web. 19 Oct. 2012. <http://www.great-web-design-tips.com/web-site-design/209.html>.
No comments:
Post a Comment