Creative sites? Yes, but maybe unusable

It’s a hotly debated issue on several forums and blogs of the sector and that often divides the mass of web designers in two different and opposing factions: I’m talking about the aesthetic aspect of a site and on how it’s appearing in one way rather than in another can enhance or on the contrary limit its potentialities and effectiveness.

A site must only give information and has to do so in the most direct and simplest way possible, as someone says. This is true, but –replies somebody else- it is also important how such information is transmitted and how through shapes and colours, stimulates the curiosity and the interest of the consumer. [Más…] Who begins as a graphic is more likely to believe also that the web design is first of all communication and as such there are strategies and aesthetics needs that cannot be denied: that particular font is more elegant and capable of capturing the attention in one precise point of the layout, this combination of colours makes more confident the reading, that background image has nothing special, but it’s attractive and makes the page more appealing.

Communication , yes, but in a creative way because showcases on the web know how to sell and attract consensus, as already required by a billboard or by a leaflet. Communicate and if possible surprise, dare, create something new and unique , experiment with styles and colours and create something that is not only simple to use but also –above all, perhaps- beautiful to see.

On the other hand, where the concepts of aesthetics and of the “appearing” are just little concrete theories – the idea that a good graphic isn’t a crucial detail of a functional site is becoming more and more popular, indeed. It’s rumoured that graphics are almost an useless distraction, a disorder that make the pages of a site heavy, not accessible, less usable, slow to upload, …etcetera, etcetera.

The general comment, lavished almost as an alibi? “Maybe the sites I do aren’t really that appealing , but at least they’re usable!”, as if one thing could exclude somehow the other.

The reality is that an effective site is yes a usable site and easy to consult, but not only. A white page with textual content, without images and with an elementary browser, is certainly easy to use and to read, but what would the web be if every site was a white screen containing text and nothing else? What would a commercial spot be without the beauty of images at high emotional impact , or without an appropriate background noise? And we should also ask ourselves: but what do we really remember, for example, of these ads, what stroked us, the subject –even if it was a detergent or a car doesn’t care- or the sounds, the words and the colours with which it was advertised?

We already know the answer.


It’s a hotly debated issue on several forums and blogs of the sector and that often divides the mass of web designers in two different and opposing factions: I’m talking about the aesthetic aspect of a site and on how it’s appearing in one way rather than in another can enhance or on the contrary limit its potentialities and effectiveness.

A site must only give information and has to do so in the most direct and simplest way possible, as someone says. This is true, but –replies somebody else- it is also important how such information is transmitted  and how through shapes and colours, stimulates the curiosity and the interest of the consumer. Leer más “Creative sites? Yes, but maybe unusable”

What’s Next in Web Design?

Thinking about what’s next online is fun because everything you wish to come true will come true. While commercial products obey to the laws of the market, which in part are influenced by the resources needed to create these products, the web is defined by the user. If the user wants something he will either get it or create it himself. To see beyond today’s limits of the web all we need to do is see what is needed.
Simplicity

Most of us will agree that today’s web sites are still way too difficult use. They are overcrowded with irrelevant information and confusing functionality. If you open a contemporary news site you get bombarded with features and advertisement. Many web sites want to do too much, too quickly. They lack in mainly three regards:


iA

by Oliver Reichenstein
http://www.informationarchitects.jp

I’ve been asked by the Italian magazine L’Espresso to write an article on The Future of Web Design. Here is the (longer) English text.

Thinking about what’s next online is fun because everything you wish to come true will come true. While commercial products obey to the laws of the market, which in part are influenced by the resources needed to create these products, the web is defined by the user. If the user wants something he will either get it or create it himself. To see beyond today’s limits of the web all we need to do is see what is needed.

Simplicity

Most of us will agree that today’s web sites are still way too difficult use. They are overcrowded with irrelevant information and confusing functionality. If you open a contemporary news site you get bombarded with features and advertisement. Many web sites want to do too much, too quickly. They lack in mainly three regards: Leer más “What’s Next in Web Design?”

Review of The Web Designer’s Idea Book II

I have to admit, the idea of a book that aims to inspire web designers with example websites seemed a little repetitive to me when I first thought about it.

After all, there are dozens of excellent galleries out there online that we can access for free, that are updated on a daily or at least weekly basis.

Could a book compete with that? Or would it just be filled with the same sites we’ve all seen in every gallery and design roundup out there.

As someone who studies design galleries and roundups on an almost daily basis, I was pleasantly surprised to see that the majority of the designs included in The Web Designer’s Idea Book, Volume 2, by Patrick McNeil (who writes a monthly column for .net magazine and runs Design Meltdown), were not ones I remember seeing previously.

In fact, most of the designs in the book are fresh and new, and haven’t made the usual rounds of galleries and showcases.

Now, of course, just because something is new doesn’t mean it’s going to be useful. It takes a combination of new and well-organized to stand out. [Más…]

And The Web Designer’s Idea Book really comes through in that respect, too. It takes the best methods of organizing content from a variety of online galleries and combines them to create what could be the most well-thought-out source of design inspiration available.


I have to admit, the idea of a book that aims to inspire web designers with example websites seemed a little repetitive to me when I first thought about it.

After all, there are dozens of excellent galleries out there online that we can access for free, that are updated on a daily or at least weekly basis.

Could a book compete with that? Or would it just be filled with the same sites we’ve all seen in every gallery and design roundup out there.

As someone who studies design galleries and roundups on an almost daily basis, I was pleasantly surprised to see that the majority of the designs included in The Web Designer’s Idea Book, Volume 2, by Patrick McNeil (who writes a monthly column for .net magazine and runs Design Meltdown), were not ones I remember seeing previously.

In fact, most of the designs in the book are fresh and new, and haven’t made the usual rounds of galleries and showcases.

Now, of course, just because something is new doesn’t mean it’s going to be useful. It takes a combination of new and well-organized to stand out. Leer más “Review of The Web Designer’s Idea Book II”

Keyword Research Using Scribe

Scribe allows you to optimize content of any kind whether it be a blog post, press release, article, etc. Membership entitles you to analyze a certain number of pieces of content and a certain number of keyword research requests depending on which plan you signed up for. The new Keyword Research Tool is the subject of this tutorial. Recently they have also updated their WordPress, Joomla and Drupal plugins to include this feature.

Supplies Needed:

* Affiliate link for Membership to Scribe SEO
* Computer with Internet Connection
* List of keyword phrases you want to research

Step 1: Login to your Scribe SEO account

In your browser’s address bar, navigate to https://my.scribeseo.com and login to your account. If you can not remember your password, click on “Forgot Password” and Scribe will email it to you.


Scribe SEO software

Scribe allows you to optimize content of any kind whether it be a blog post, press release, article, etc. Membership entitles you to analyze a certain number of pieces of content and a certain number of keyword research requests depending on which plan you signed up for. The new Keyword Research Tool is the subject of this tutorial. Recently they have also updated their WordPress, Joomla and Drupal plugins to include this feature.

Supplies Needed:

Step 1: Login to your Scribe SEO account

In your browser’s address bar, navigate to https://my.scribeseo.com and login to your account. If you can not remember your password, click on “Forgot Password” and Scribe will email it to you.

Step 2: Choose the Web Version

Under “Supported Platforms”, click on “Click here to optimize with Scribe Web.”

Step 3: Choose “Add Content”

Click on the link that says “Add Content”

Leer más “Keyword Research Using Scribe”

Pixel Art: Create a Better Favicon For Your Website

Having a good favicon can make a website more noticeable and relevant when a past visitor is searching through bookmarks, history, or favorites. It can also help for users to find a website quickly when trying to search their way through multiple tabs. In this post we’re going to take a look at some great Favicons that represent the respective brand well, and also cover some tutorials and how-to’s for creating your own effective Favicon on your website.
Tutorials and How-To’s

Creating and implementing a Favicon is relatively easy. Favicons in the URL field and in browser tabs are at 16×16 pixels, but 32×32 pixels are used in some browsers in the Favorites section. Below is a step by step guide to first designing your favicon, and then placing it into your website.
Step-by-Step Guide to Putting a Favicon on Your Site

* Open up MS Paint or another graphics program of your choice. MS paint works just fine since you’ll be having to work in simple pixels and a simple color palette anyway, and because it supports saving files in the Favicon format: .ico. However, a Favicon can be created in another program and then translated into .ico with an online generator fairly easily as well.
* Create a 16px by 16px document and begin designing within this space. It can be difficult to create something with a lot of detail in this small space, so be sure to check out the best practices and guidelines below for creating an effective Favicon. You may also want to create a 32px by 32px icon with more detail, since some browsers display Favorites at this size. For practicality purposes, though, 16×16 pixels is usually sufficient for most uses and modern browsers.
* Save the icon in a .ico format. This can be done in MS Paint, through Photoshop with this plugin, or use one of the online generators below. It can also work to simply save the icon in any common web image format, and then rename the file to .ico instead of .jpg, .gif, or .png. However, this is just disguising the real format, and using this method may not be fully compatible among all browsers.
* Place the icon in your images folder, or in the root folder of your website.
* Use the following code in the head section of your webpage, preferably next to your meta tags or other link tags:
view sourceprint?
1


http://www.onextrapixel.com/2010/10/06/pixel-art-create-a-better-favicon-for-your-website/

Favicons are small pixel-size icons which are short for Favorite Icons, or icons that are intended to be viewed next to a website title when bookmarked. They also show up in the URL section of a web browser and in tabs. The purpose of a Favicon is not just for visual impact, but it is an essential branding tool, that can support the greater branding images of a website like the logo, overall color scheme, and theme.

Pixel Art: Create a Better Favicon For Your Website

Having a good favicon can make a website more noticeable and relevant when a past visitor is searching through bookmarks, history, or favorites. It can also help for users to find a website quickly when trying to search their way through multiple tabs. In this post we’re going to take a look at some great Favicons that represent the respective brand well, and also cover some tutorials and how-to’s for creating your own effective Favicon on your website.

Tutorials and How-To’s

Creating and implementing a Favicon is relatively easy. Favicons in the URL field and in browser tabs are at 16×16 pixels, but 32×32 pixels are used in some browsers in the Favorites section. Below is a step by step guide to first designing your favicon, and then placing it into your website.

Step-by-Step Guide to Putting a Favicon on Your Site

  • Open up MS Paint or another graphics program of your choice. MS paint works just fine since you’ll be having to work in simple pixels and a simple color palette anyway, and because it supports saving files in the Favicon format: .ico. However, a Favicon can be created in another program and then translated into .ico with an online generator fairly easily as well.
  • Create a 16px by 16px document and begin designing within this space. It can be difficult to create something with a lot of detail in this small space, so be sure to check out the best practices and guidelines below for creating an effective Favicon. You may also want to create a 32px by 32px icon with more detail, since some browsers display Favorites at this size. For practicality purposes, though, 16×16 pixels is usually sufficient for most uses and modern browsers.
  • Save the icon in a .ico format. This can be done in MS Paint, through Photoshop with this plugin, or use one of the online generators below. It can also work to simply save the icon in any common web image format, and then rename the file to .ico instead of .jpg, .gif, or .png. However, this is just disguising the real format, and using this method may not be fully compatible among all browsers.
  • Place the icon in your images folder, or in the root folder of your website.
  • Use the following code in the head section of your webpage, preferably next to your meta tags or other link tags:
    1 <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />

Further and More Specific Tutorials

Best Practices

As anyone can see, creating and implementing a Favicon is pretty easy. Most web designers know this, but above is a quick guide regardless. Now, though, let’s look into Favicon design in a bit more detail. Like with any web design practice, there are a set of best practices when it comes to designing and implementing favicons onto your website. Below are just a few ideas, some technical, and some not.

Name Your Favicon “favicon.ico”

Many websites name their favicons “favicon.ico” for a number of good reasons. The most important reason is browser compatibility with IE. Yes, even with classic Favicons we must still deal with issues in Internet Explorer. Fortunately, issues are easy to overcome. IE6 may only recognize icons as favicons if the icon ends in .ico. There are ways to make other image formats (such as .png, .jpg, and .gif) work as Favicons by just altering the HTML code above, and it will work just fine in modern browsers. However, we won’t even get into how to do that since it’s just much easier and more compatible to make favicons in the standard .ico format.

Also, IE5 and earlier may not even recognize a favicon if it is named anything different than ‘favicon’. Many will argue that the percentage of those who still use anything IE5 and earlier is next to nothing, and that it barely matters. While this is a very good point, it doesn’t take much extra effort to name a favicon appropriately to include that small percentage regardless.

The third good reason to name your favicon exactly “favicon.ico” is for consistency purposes. When working with websites from developer to developer, this is the standard name for such an icon and therefore it can be recognized and worked with more easily.

Directory Structure

Place Your Favicon in the Top Directory

While our how-to example above did indeed place the favicon in an images/ folder, it is generally a best practice to place the favicon in the root directory of your website. While it is possible to place a favicon in any directory and link to it respectively, most developers place it in the top directory for consistency purposes.

It may make more sense to some to put it into an images folder since it is an image, but the standard developer-to-developer directory structure includes it in the top directory with the main pages.

Create a Multi-Resolution Icon

We were discussing above what the common size dimensions were for favicons. 16px by 16px was the most common, and many websites choose to just use this. A standard 16px by 16px icon works just fine in the majority of cases. Yet, there is a way to create a multi-resolution favicon that supports larger versions of the icon, just in the case that the icon was translated to a desktop or application icon. This prevents the 16px by 16px icon from being stretched out into something hideous, in the rare cases of its expansion.

Multi-Resolution Icon

For a detailed tutorial on how to create multi-resolution icons, check out this post: Creating a multi-resolution favicon including transparency with the GIMP. While this tutorial is based in GIMP, the same principles can be translated to Photoshop or another photo-editing program as well.

Use the 256 Color Palette

This simple color palette is the default Windows color palette. It is what most browsers that view your favicon will support, plus, the simplicity in colors means a better visual outcome for a design in such a small space.

Keep It Simple & Consistent with Branding

Of course, keep to the main purpose of using a favicon: let it support your website brand. Many favicons are a simple version of the website logo, or a relative image otherwise. They are in the same color scheme as the main color of the website, and don’t stray too far away from the overall look and theme of the website. Never just use a random image or interesting piece of pixel art for a favicon. There’s just no point to that. Make it relevant, specific to your branding, and relative to your website’s overall look.

Also keep the design as simple as possible. There is just simply not enough room for extra design features such as drop shadows, texture, and so on. Clean lines and shapes are the best way to create a crisp, clean, and effective favicon. Without a minimal design, the overall use can backfire by becoming too crowded and blurred for effective branding. Leer más “Pixel Art: Create a Better Favicon For Your Website”

The Next Level of Design: Being Unique

In a world filled with CSS galleries and showcase websites, everything starts to look the same.

Gradients, rounded corners, drop shadows, it’s extremely hard to get away from the strongest of trends in our industry.

Each year however, some people manage to set themselves totally apart from everyone else and produce stunning designs with inspiration seemingly flowing directly out of their fingers and into their work.

In this post, we’ll take a look at a few of those people and some of the things which they do to be unique from everyone else.
What Constitutes Being Unique?

It’s all well and good suggesting that you should be unique and different from the competition, but what does that really mean? There are so many websites and great designers out there, what individual elements constitute being unique?

Well, in simple terms being unique just means doing something differently. You don’t have to create a design with the navigation in the footer and the copyright information up where the logo would normally be just for the sake of standing out. It’s about not just following what everyone else is doing and coming up with your very own way of displaying the information and the message which you are trying to get across to the user.

How many sites have you seen with a full width header (with a gradient), followed by a full width navigation bar, then a content section and a sidebar, then a full width footer? Hundreds? Thousands? If your focus is going to be being unique, then this is probably a design recipe which you should steer clear of. It’s too easy to create yet another site like that. Don’t get me wrong, they are popular because they are effective and easy to create… but they don’t stand out.

Being unique is largely about doing small things differently to everyone else rather than trying to reinvent the wheel. Of course you also have to accept that the time period for which it remains unique will be limited. If you do a great job, then unfortunately (or fortunately, depending on how you look at it) it’s going to be copied by many, many people. That being said, innovation is almost always remembered.


thumbIn a world filled with CSS galleries and showcase websites, everything starts to look the same.

Gradients, rounded corners, drop shadows, it’s extremely hard to get away from the strongest of trends in our industry.

Each year however, some people manage to set themselves totally apart from everyone else and produce stunning designs with inspiration seemingly flowing directly out of their fingers and into their work.

In this post, we’ll take a look at a few of those people and some of the things which they do to be unique from everyone else.

What Constitutes Being Unique?

It’s all well and good suggesting that you should be unique and different from the competition, but what does that really mean? There are so many websites and great designers out there, what individual elements constitute being unique?

Well, in simple terms being unique just means doing something differently. You don’t have to create a design with the navigation in the footer and the copyright information up where the logo would normally be just for the sake of standing out. It’s about not just following what everyone else is doing and coming up with your very own way of displaying the information and the message which you are trying to get across to the user.

How many sites have you seen with a full width header (with a gradient), followed by a full width navigation bar, then a content section and a sidebar, then a full width footer? Hundreds? Thousands? If your focus is going to be being unique, then this is probably a design recipe which you should steer clear of. It’s too easy to create yet another site like that. Don’t get me wrong, they are popular because they are effective and easy to create… but they don’t stand out.

Being unique is largely about doing small things differently to everyone else rather than trying to reinvent the wheel. Of course you also have to accept that the time period for which it remains unique will be limited. If you do a great job, then unfortunately (or fortunately, depending on how you look at it) it’s going to be copied by many, many people. That being said, innovation is almost always remembered.

Leer más “The Next Level of Design: Being Unique”

50 Fresh and Inspiring Dark Web Designs

The list was so inspiring and commented on that we decided to do a new one with another 50 inspiring dark web designs. So here they are, 50 new examples of how some sites are using dark colors as main elements of their design. Enjoy.


Gisele Mullerhttp://webdesignledger.com

The list was so inspiring and commented on that we decided to do a new one with another 50 inspiring dark web designs. So here they are, 50 new examples of how some sites are using dark colors as main elements of their design. Enjoy.

No More Dedicated

darksites06

chilli

darksites01

Digital Labs

darksites02 Leer más “50 Fresh and Inspiring Dark Web Designs”