Week 5

The Top 10 Rules of Website Design 

1. Apply C.R.A.P
Referencing to my previous post on C.R.A.P (contrast, repetition, alignment, proximity) they are important principles to remember and use when creating a website.

2. Simplicity 
A huge thing I learned over this quarter, is to keep things simple. Less clutter helps create a visually appealing website.

3. Easy to navigate
No one enjoys a website that is confusing to navigate. ClubRunner explains that it's crucial to have an easy to use website because if the visitor finds it difficult to navigate from one page to another, he or she will get frustrated and leave the website.

4. URL should be easy to remember 
One of the first few weeks of class our professor, Jason talked about how important it is to have an easy URL.  He gave us an example that he used a URL name with the letter 4 in it, and when said out loud people would think to type four instead of use the actual number 4.  So don't confuse your audience, make it clear, simple and easy to remember!

5. Keep it updated
It's very important to keep an updated site. If you want users to continually visit your site, you need to update it with new information or else there is no point for visitors to keep visiting the site if nothing has changed.

6. Don't write a novel
When designing a website, the content is very important. TechRepublic explains that the content of web pages needs to be written in a specific way short and to the point. Visitors to a website don't read online content the same way that they read the pages of a book.

7. Mobile friendly
With smart phones being the new age of technology, it's important to remember to make your site mobile friendly since most people these days access websites via their phone.  ShortieDesigns states that, "If your website is not mobile friendly, you can either rebuild it in a responsive layout (this means your website will adjust to different screen widths) or you can build a dedicated mobile site (a separate website optimized specifically for mobile users).

8. Load time
It's important to make sure your page doesn't take forever to load, because a lot of the time people will get impatient and leave your site. ShortieDesigns provides some tips to help your site load more effectively. 1. Optimizing image sizes (size and scale) 2. Combining code into a central CSS or JavaScript file (this reduces HTTP requests) and 3. Minify HTML, CSS, JavaScript (compressed to speed up their load time).

9. Check website for errors
It's important to check your website for errors, either you double check for errors or have a friend/editor help you out. SharpenedProductions state, "As an experienced editor will tell you, a great piece of work can be tarnished by a small error. Webmasters should regularly check their websites for typos, broken links, and images that do not load correctly."

10. Learn from others
Looking at other websites and their designs is one of the best things you can do. In class we talked a lot about looking at other peoples works and to highlight the good and bad. It's important to take notes so that you can learn from their example.

Week 4

Basic design and layout principles

This week in class we talked about the term C.R.A.P. which stands for contrast, repetition, alignment, proximity. These principles have been very important in our class and they make a huge difference on the way things are presented. It's important to have an appealing design and layout when creating any piece of work. The key point is to KEEP IT SIMPLE.

Treehouse does a great write up explaining in detail about C.R.A.P. They state:

"The C.R.A.P. principles (Contrast, Repetition, Alignment, and Proximity) are good ways to double-check your design work. Just like with a pre-shot routine in golf, if you constantly question and nitpick the details of your design work, good design habits will form and you’ll no longer have to think about if your padding is off or elements aren’t aligned, you’ll just do it correctly from the start."

Contrast
Contrast is important in helping us distinguish objects from each other.  It's important to make elements that are not the same clearly different. You can attain contrast by space, different colors, positioning and bold/narrowness.
*Make different things different
*Brings out dominant elements
*Mutes lesser elements
*Creates dynamism



Bad contrast

Better contrast

Repetition
In the textbook Graphic Communication, they state the importance of repetition and consistency. Being consistent with the same fonts, colors and style is key to keeping it pleasing on the eye.
*Repeat design throughout the interface
*Consistency
*Creates unity

Alignment
Alignment is important in that your site shouldn't look like you placed something there randomly.  It's about obtaining unity among elements.
*Creates a visual flow
*Visually connects elements

Better alignment 

Proximity
Proximity is about having objects closer or further apart. Related items should be grouped together so that they look as if they are a group. The audience shouldn't have to figure out what caption goes with what picture, etc.
*Groups related elements
*Separates unrelated ones

For more information on C.R.A.P here is a great video that gives more examples of each principle

These principles we learned in class will be very helpful for future projects and assignments we do.  I think it's very important to keep a simple and easy on the eye layout and design. C.R.A.P will help me make a more appealing personal website and group website.  These tips are very useful for anyone planning on building any site, newsletter, brochure, magazine cover, etc.  I hope these principles will be useful for you!