How to Steal a Design Blog

Post Author By Scott, August 12th, 2009 in Design Articles, Web Design | 20 Super Comments

Here’s a post I wish I didn’t have to write, but it’s a cautionary tale for anyone out there still going to the trouble of producing original content. In the design realm lately it seems that there are as many “bloggers” ripping off other people’s content as writing their own. And I don’t mean in the legitimate way of publishing excerpts and links to good stories from other sites with proper acknowledgment. I mean outright thievery.

The last 53 posts on Spoonfed Design have been copied in their entirety, without permission or attribution, on the site webdesignsydneyaustralia.com. This is an example of blog scraping at it’s worst. All of SFD’s  original content published since February 12, 2009 has simply been lifted and republished on this site without so much as a thank you. The past 39 consecutive posts on the Sydney site, without exception, are posts from Spoonfed Design.

The offending site is part of a blog farm designed to funnel traffic to a Sydney-based design and SEO firm called Shift Interactive.  How do I know that? Well, Shift Interactive is owned by a gentleman named Jamie Harbison, who also turns up on a WhoIs search as the admin contact for the scraper site. When I sent a polite note to Jamie asking for removal of my material from his site, twice, I received no reply. But one thing did change: the scraper site URL stated above now redirects to shiftinteractive.net.   That has only made things worse from my perspective, as I’ll go on to explain. But first, here’s a look at the scraper site homepage as of a few days ago, from the Google cache:

(more…)

Accessible Design: the Web for Everyone

Post Author By Michelle Shull, July 31st, 2009 in Design Articles, Web Design | No Comments Yet

Access All WWW Areas graphicToday I am writing about a topic which is close to my heart: accessible design. In simplest terms, accessible design is making sure your web content is available and understandable to all audiences, including people with visual or other disabilities.

Accessible web design allows individuals who are visually impaired or non-readers to experience web content through screen readers, which translate text into speech. The practice of accessible design also includes modified or unique interfaces, like single button computer input devices and touch screens. It is a part of a larger movement called Universal Design, which seeks to make all parts of the world accessible for all people, regardless of ability.

This article will focus on web design. Future pieces may explore various computer interface devices designed for individuals with disabilities, but today we’ll be limiting our focus to how designers might better address the needs of all readers. (more…)

40 Highly Creative Headers

Post Author By joelreyes, July 25th, 2009 in Showcase, Web Design | 12 Super Comments

Good header design requires both creativity and consistency with a website’s overall theme. A great header captures and holds the attention of visitors, and hopefully even lingers in their mind long after they have left the site.

Here are over 40 beautiful and creative headers that do just that. Some stimulate emotions and aggressively capture attention; others are more simple and elegant. There are many different header styles in this showcase. We hope you see something you like and get inspired to try something new!

Dorotheu

Screenshot

Magouya

Screenshot

(more…)

Contact! 30 Case Studies in Contact Form Design

Post Author By Scott, July 17th, 2009 in Showcase, Web Design | No Comments Yet

Think about it: your contact page is what many prospective clients will be looking as they debate whether or not to get in touch with you. It may be your last chance to make a good impression!

But contact pages are where things can get a little sloppy sometimes–especially if you use a contact form. A poorly designed or generic-looking contact form can create a negative impression, especially if the form look clashes with your carefully constructed design.

Contact form design may be as simple or as elaborate as you like, in keeping with the style of your site. Just make sure the form is seamlessly integrated, both visually and textually, with everything else.

Here are 30 examples of contact forms done right. There is something to be learned from each these about creative messaging and elegant design.

Christian Sparrow delivers a contact page that is simply stunning, down to the moving shadows on the drifting clouds. The hand-drawn form fits perfectly.

(more…)

The Snazzy Web: Four Trends in Innovative Web Design

Post Author By Michelle Shull, July 9th, 2009 in Design Articles, Web Design | 4 Super Comments

Four styles dominate the current trends in web design. Many lists have been compiled of the best examples of each, so in this article we’re going to examine what makes each style unique.

Hand-Drawn

Hand-drawn web design is a relatively new innovation, although I have seen some web designers experimenting with the concept for a few years. I think some of the inspiration for this trend has come from scrapbookers and crafters. This style typically avoids any of the traditional “boxy” elements found in most conventional websites, instead relying on a more casual, freeform design.

Many hand-drawn sites use extra elements, like sticky notes or other embellishments, to achieve a very creative and personal design style. (Of course when some of these creative twists become ubiquitious they no longer seem so personal!) We can see lots of hand-drawn detail in television actress Mariska Hargitay’s personal website, below.

(more…)

Hover Effects in Web Design: Best Practices and Examples

Post Author By Matt, April 15th, 2009 in Design Tips, Web Design | 30 Super Comments

Design is in the details. No matter what field of design you work with, you will always hear that, because it is very true. The slightest details have a direct effect on the design as a whole. This is true in web design, too. Everything from the amount of white space between two interface elements to the size of a header will impact a website. Another one of those details is hover effects.

In navigation, usability is essential; hover effects not only help styling but they also help usability. Why is that? A good hover effect will tell a user when they have a link under focus, and which link they have under focus.

In the following article, I will go over the best practices and techniques for hover effects. I will be using over 30 examples to show good use of hover effects.

Gradient Hovers

The more common type of hover effect is the gradient. There are many uses of this, here are a few.

Gradient vs. Gradient

Take a look at the navigation shown below to understand what this means. The normal button, not under focused and not selected has a gradient fill that goes from darker at the bottom to lighter at the top. When under focus, the gradient flips from dark at the top and light at the bottom. This is an especially good hover effect because the hover button is very different from the normal, and adds depth to the design. Look at the two buttons side by side. You can very easily determine the difference between the two. This is essential what you should aim for: hover effects that are easily recognizable and distinguishable.

(more…)

Design a Clean Corporate Website With Illustrator

Post Author By Matt, April 12th, 2009 in Tutorials, Web Design | 40 Super Comments

Corporate web design is rather simple, because it often follows basic guidelines and trends. Today, we will go over the complete process of creating a clean and relatively simple corporate web design using Adobe Illustrator.

I will talk about the best techniques and approaches to creating a web design started in Illustrator, which is a great tactic. The image below shows what we will be creating. This style of design can be used universally, as it follows many trends, and looks very professional. We will use the most common corporate structure, which consists of a header, an introduction with welcome text and screenshots, and a simple grid-based information layout. After completing the interface in Illustrator, I will go over how to use the Slice Tool to prepare the design for the development stage.

(more…)

Page 1 of 3123»
Top of Page