5 Things I Hate From A Blog / Website

HATE, it might sounds cruel condemning other people's works. Here I’m referring to certain elements that a blog includes beyond the essential in its design. Nevertheless few of these elements have been personally developed and that are not considered as a mistake, mostly I disclose them as such annoying by the way. And I have come across 5 deadly distractions that make me leaving those websites.

1. Embedded / background music

Hey stop this sound! I really mean it. Sound playing on websites can be disturbing, and often there is no option to disable this noise. Noise? It may be a melody to your ears, but to me, it’s just noise especially if there is no useful need for the music. Without the control to turn it off, I would simply leave your blog, sorry.

I know it's easy to block embedded audio like we react to ads and pop-ups. Do you expect me to turn my speakers off?. However I wouldn't discourage an interactive experience from any website or blog, just let me be the judge if I want some media start playing right away during the page loads. I would exclude a website which commonly promotes music album or songs. So, It's ok to include music clips on this kind of websites, but give me the choice to listen.

2. Pop-up windows

One question, Why do so many people have pop-up blocker enabled?. Because most of us hate pop-up windows!. I am really got bothered by pop-ups that appear as early as I begin reading an article. The biggest drawback with pop-ups is that they take my focus away from the browser window. In most cases, it distracts me from the content of the website by dragging my eyes off the content. So are they actually useful features?.

Aside from accessibility, they also present general usability issues. I agree in such event, pop-ups will do its functions for a reader. Therefore we need designing them in a way that it behaves only when the reader has have sufficient time to gain access our content.

3. Flash / Slider

In this day and age, I'm looking for websites that load quickly to find information. Whereas flash animation undoubtedly enhances a website presentation and gives modern look to it. Therefore good looking website can also be a bonus and factor behind my revisit. BTW this flashing element, sometimes, would take longer than usual to load. As a potential reader, it loses me.

That's about a flash website. Lets moving on a blog that integrate live action with a slider. The slider itself occupies most of the space in top section. So the article has been pushed down and asked me to scroll down even to see the post title. Except for photoblogs and profile page, why don't they just depend on text displaying most recent and popular posts?.

4. Animated / motion

Back in the days people use scrolling text, marquees, and constantly running animations. Sure, they might be using it to get the visitor’s attention, but since moving elements have an overpowering effect on my vision, it’s just going to become an annoyance; Nothing more than a distraction. And nowadays I've noticed twitter bird flying around on many blogs. So this looping animation might be cute within few seconds but after that it becomes awfully annoying. I'm often reluctant from visiting back if many unnecessary animations on your blog.

5. Horizontal scroll bar

There’s something very awkward about scrolling to the left and right. It's not natural for me to scroll sideways. It seems like I'm holding a small torchlight when reading in the dark. Although most web designers, I believe, have tried to avoid this situation for readers such as reducing small amount of pixels from main fixed grid, it's hard to compromise with various screen resolutions in the market. Unless they approach their designs with fluidity concept in mind.

Of course, there are other ways around to use those elements without distracting our readers. I hope you enjoyed this post.

Article By : 54BLOGGER
Permalink : http://www.fiveforblogger.com/2012/02/5-things-i-hate-from-website-blog.html

Make a Statement with Type

Selecting typefaces for a design project is about much more than just how the letters look. It is about more than serifs and sans serifs.

Font choices can have an impact on how your message is communicated and how people feel about the words on the page.

Think about the project in terms of branding. The message conveyed by typefaces should match the message of the brand or site in general. Some of the most well-known brands in the world – Coca-Cola, Canon, Fiat, IBM, Lego and MGM film studios – can be identified by their typefaces.

Is your site and idea bold? Or is it more submissive? Who do you want to feel most comfortable with your information – women, men, children? Then think about how you are using the words themselves. Are you using typography just to communicate words or more for show?

All of these factors should come into consideration when selecting fonts for your next project. It is important to understand how typography can make a statement and how you can influence through font decisions what that statement may be.
Think about the big words as text that will make a statement. Yes, the typefaces you use for main body copy are very important, but consider a user’s first impression when thinking about type and making a statement.

Set a Tone

Your font selections should reflect the meaning and tones of the words used in the typeface. Whether it is right or wrong, certain classifications of type have standard “feels.” For example, cursive fonts are often used for wedding websites or to promote things that are considered feminine. Sites that make you think of loud noises often use bold, thick typefaces.

But it can be about more than the tone of the site. Think about each word in the presentation. (How odd would it look to see the words “White Out” in purple letters or “Fist Fight” in a script?)

Determine the tone of your project before selecting the first font. Knowing your site’s intended audience is key and having an idea of how you want a project to feel will help you select appropriate typefaces.

Formal vs. Informal

You probably know the difference between a formal and informal font on the spot.

Formal typefaces tend to have traditional looks – serif and Old English styles – and are used commonly in professional publication. Books, newspapers and many websites build their design around formal typefaces. Formal type selections work well for sites that want to establish credibility and authority.

In some instances a script type style can have a formal feel, but much of it is determined by the context and font itself. Many sans serif fonts, which are standard in web design because of readability, can also be used for formal design.

Informal typefaces have a distinct look of their own. Almost any novelty typeface would be considered informal, as would most cursive styles. Fonts that are bubbly or overly thick and round also lack a sense of formality.

These types of fonts often work great for websites that are lighthearted in nature, are designed with children or play in mind or for sites that are humorous.

Masculine vs. Feminine

Really? A font can convey masculinity or femininity? Most certainly.

Masculine fonts tend to have hard edges, such as square or sharp serifs, and thick strokes. Slab serifs are often considered masculine but many classify a font such as Lobster (a thick-stroked script) in this category as well. Many condensed and ultra thin fonts (both serifs and sans serifs) are also considered masculine.

Feminine fonts are lighter, with thinner strokes and curves. Script and cursive typefaces are most commonly linked to women-targeted sites. Fonts with very round letterforms or distinct slants are also part of this classification. Finally, letters with ultra-thin strokes (think hairline) tend to have a more feminine feel.

Keep in mind though that much of what makes a font feel masculine or feminine is context. A color palette can affect how a typeface is viewed as can the actual words on the page.

Go Big (or Small) on Purpose

Size matters.

Overly large fonts will catch your eye immediately (as will a few words at a super-small size).

Large type emphasizes importance and heft. But text that is too large can sometimes feel overwhelming or crowded. The bigger the font size, the more the words will scream “look at me!”

Small type tends to be more formal and is used when other items in the design should be the focus. Small lettering may feel unimportant or easy to disregard. It is often used in display for secondary design elements, such as contact information.

As important as size itself is the use of varying point sizes (this also applies to bolding, italics and color). Make the important words big. Showcase words that you want to resonate with people after they read the text.

Use Type as Art

One of the easiest ways to really set your project out with type is to turn letters into a work of art.
This may be in the form of a custom typeface, a logo or even words to form some sort of image.

Using type in an unexpected way can really make elements stand out. But it can also be a risky tactic. Be careful to make sure that your text actually works as an image and that the words remain readable. This is a trick that is best employed sparingly and for a limited number of elements.

Food for Thought

Think about common “brands” and their signature typefaces. Would you view these sites differently if tomorrow the fonts changed?



The New Yorker: The font selection is formal and carries authority. Switching to a lighthearted, informal style hurts the legitimacy of the title.



Tumblr.: The popular site uses a font that is strong and traditional. The more sketchy, handwritten style seems to have a disconnect with the brand.



The Knot: The popular wedding planning and information site uses a font with a distinct feminine feel. Would fewer women turn to the site if it used a stronger typeface?

Articles By : Carrie Cousins
Permalink : http://tympanus.net/codrops/2012/09/26/make-a-statement-with-type/

Principles of Beautiful Web Design

Many people think designing a web or weblog is a technical task, akin to programming. This is not the case. Keep it simple. The most important is design elements should not overshadow the information on the page. A web site need to be laid out in a way that pleases the eye, is easy to read, and emphasizes the important parts of information. There are some simple keys to keep in mind when playing with web design. By following some simple points, anyone should be able to create a visually pleasing design and take one step closer to fame. Okay, it’s not that simple, and talent and experience do matter, but anyone can turn their home page into something prettier within mere minutes.

By Matt Silverman @mashable.com

The best part is, you don’t have to be a designer or a programmer to create a great looking blog, but you should know where to find the right resources, and how to align your blog’s design with its purpose.

• Learn Some HTML. A basic understanding of the web’s nuts and bolts will allow you to make custom design tweaks, fix template problems, and format your posts more precisely.
• Find the Right Template. Many free design resources that are easy to plug right into your platform of choice.
• Layout. The key to good blog design is to strike a balance between content and clutter. Think about utility and user experience when choosing your layout and number of column.
• Be a Layout Sleuth. It’s possible that you might be able to use a template from any lovely blog design for your own blog.
• Make It Your Own. Use your blog’s back-end bells and whistles, in combination with your new HTML knowledge, to add your own brand to the design.
• Go Minimalist. If you’re not design-minded, Minimalist themes often use neutral colors, clean layouts, and lots of white space, making them ideal for easy customization.
• Further reading

By Collis @psd.tutplus.com

Web design can be deceptively difficult, as it involves achieving a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent. I’ve put together my 9 principles for good Web design.

• Precedence (Guiding the eye). When navigating a good design, the user should be led around the screen by the designer. Manipulate position, color, contrast, size, and design elements to achieve precedence.
• Spacing. Empty space seemed wasteful. In fact the opposite is true. Spacing makes things clearer. Consider use of line spacing, padding, and white space.
• Navigation. Buttons to travel around a site should be easy to find beside the text of a button should be pretty clear. In a larger site, you might make use of bread crumb trails, sub-headings and a site map.
• Design to build. Consider things like effect on resizing screen, vertical alignment, and using pure CSS buttons.
• Typography. Make sure your text sizes are consistent, large enough to be read. Spacing between lines and away from other objects is important to consider. Small columns of text work much better. Justified text tends to create weird gaps which isn’t nice for your eye when reading.
• Usability. Try to adhere some standard conventions e.g underlined text is expected to be a link.
• Alignment. Aligning makes your design more ordered. Try to keep things consistently placed on a page, and you may also wish to base your designs on a specific grid.
• Clarity (Sharpness). Cleaning up shapes, lines, and boxes if you’re creating them in Photoshop, and make sure any text is created using the appropriate anti-aliasing setting.
• Consistency. Everything should be themed. Heading sizes, font choices, coloring, button styles, spacing, design elements, illustration styles, photo choices, etc.
• Go Minimalist. If you’re not design-minded, Minimalist themes often use neutral colors, clean layouts, and lots of white space, making them ideal for easy customization.
• Further reading

By Emily Gonsalves @artblog.emilygnsalves.com

• Balance. Symmetry tends to create stillness and results in a more static, controlled composition. Asymmetry can give a sense of unrestrained energy.
• Contrast. Can be between: shape/form, volume, size, value/colour, position, or direction of items.
• Emphasis. Used to focus the attention of the viewer and add interest.
• Positive/Negative. Excessive positive space prevents the viewer from focusing and important elements can be overlooked. Excessive negative space can result in a product which appears unfinished or unusually plain.
• Repetition. Encompasses rhythm and patterns.
• Movement/Direction. Diagonals tend to create visual movement, as they encourage eye movement in a particular direction.
• Gestalt/Unity. Grids create a sense of unity and structure. Grouping creates a sense of unity and harmony.
• Further reading

By Juul Coolen @noupe.com

• Balance. Ensure the design does not tip to one side or the other.
• Grid. Columns and spacing improve readability, making a page’s content easier to absorb on the eye.
• Color. Black and white convey chic and professional, while red makes certain elements stand out and keeps the design from looking dull.
• Graphics. Great design doesn’t need fancy graphics. But poor graphics will definitely hurt a design.
• Typography. Web typography is handicapped due to our lack of complete control over the appearance of type on the Web.
• White space. White space gives text some breathing room and spatial peace.
• Connection. When a design is inconsistent, its unity can be lost on the user.
• Further reading

From book 'The Principles of Beautiful Web Design' by Jason Beaird

• Layout and Composition. An awareness of design relies heavily on understanding the spatial relationships that exists between the individual component of a design.
• Color. Perhaps the most mysterious of design is the topic of color selection. For creating harmonious color combinations, anybody can choose a set of colors that work well together to complement the overall message of a website.
• Texture. An aspect that is often overlooked. Texture is the key to create stand out designs. Use of points, lines and shapes to communicate and support your site's message.
• Typography. The important of typography is self-evident. Type is everywhere, and understanding the mechanics of written language is essential for any visual designer.
• Imagery. The necessary companions to any well-designed site are the images and illustrations that grace its pages. Finding the right image, learning the basics of cropping, masking, borders, and file formats before we take the final step in our simple design.

Article By : 54BLOGGER
Permalink : http://www.fiveforblogger.com/2011/01/principles-of-beautiful-web-design.html