Illustration is a lovely trend in web design. It fits the medium well. Great Illustrators though, often don’t think in terms of the web when they do their illustrations. Take a look at this very nice sky/hill cityscape illustration I found on shutterstock:
I think this illustration would make a great base for a web design, but clearly it isn’t prepared for such a task out-of-the-box. Lets do some manipulation and prepare it the web.
Like it or not, our lives often take us away from the computer. Out of our homes, and into the great outdoors. But just because the Eyedropper tool isn’t within reach, doesn’t mean that you need to turn your inner-designer off. Here are some ways you can keep your design on while you are away from the computer.
Nothing is worse than having an amazing idea and then losing it to a flood of other thoughts before you can get it down. If you are at the computer, it’s easy to give your epiphany a more permanent home, but while you are away, the best tool is always your trusty pen and pad. Field Notes is a very cool, designer-friendly brand for your notepad needs.
You know what they say… design is in the details. When you are designing a website, there are opportunities abound to focus on little details to visually enhance the experience. In this tutorial, we will show you how to create links with underlines that “glow”.
The “clouds” filter (Filter > Render > Clouds) does just about what you would suspect. Using both the foreground and background color, it creates a misty/cloudy fill. This simple filter can be used for all kind of interesting things, especially when combined with other filters, layer effects, and layer modes.
Here are three simple uses:
There some nice looking forms out there on the web, but by and large web forms are a quagmire of default-style web ugliness. This has to do, in part, because of cross-browser quirks and the difficulty of styling some form elements in certain browsers. But in truth, it’s not that difficult to style forms and it is more about designer/developer laziness than anything else.
It’s sad really, because forms are such essential parts of websites. It is on forms that you are asking for very intimate attention with your users. You have provided an area for them to communicate with the website is some way. This is always desirable and valuable. The form design should enhance this experience, not detract from it.
I think the best way to get a great form is to design it first, without thinking about the constraints of HTML & CSS. So let’s get Photoshopping!
(more…)
Twitter offers an API which you can use to pull information from twitter for your own uses. Even easier, they offer a little javascript widget which automatically uses this API and returns simple HTML of your recent tweets.
Let’s design a unique website for our Twitter updates utilizing this widget.
Toolbox CSS is styling information that has nothing uniquely to do with any particular website. These are a collection of common styles that can be useful on any web project. How many times have you written a class for clearing a float? Too many, is my guess. The idea with Toolbox CSS is to include a separate stylesheet for these “utility” styles.
It was only a few months back when I was excited to see that Web Designer Wall had released one of their excellently produced design compilations, Grid and Column Designs. After a quick examination of the whole article I was quite impressed at how many of the popular designs were brought together in a few simple categories and how those designs had managed to elegantly use simplicity and some organization to show their content. It was about a minute after my first glance that I realized that some extremely well constructed editorial sites that could easily be as good as or even better than the current selection; Australian News Websites.
