Archive for category Web Design

Why Designers Should Learn Programming

http://player.vimeo.com/video/16140257

Daniel Shiffman from Mark Webster on Vimeo.

Advertisements

Leave a comment

Color of the Year 2010 (Infographics)


Who said charts and graphs have to be boring? Sure, old Matt from college didn’t notice half the class asleep by the first 30×20 data matrix of his presentation on the mating behavior of the Micronesian bed bug. He should have checked Colourlovers’ way of getting the point across. Its recent survey, Color of the Year 2010, proves that visualizing data can be quite refreshing.

Information is only useful when it is understood. Infographics are concentrated nutrition for data consumers, like multi-vitamins, fulfilling basic info requirements hassle-free while keeping readers occupied and entertained. If there is room to deliver complex information in a clearer and more interesting way, then Colourlovers’ visualization is definitely a step in the right direction. (sp)

Reference site url:http://www.smashingmagazine.com/

Leave a comment

Beautiful CSS Font Stacks


Designers are rejoicing over the fact that we’re no longer limited to a few “Web-safe” fonts. After all this time, we were getting a bit tired of them anyway (hence the proliferation of font-replacement solutions). Yet there are still challenges with creating nice CSS font stacks of typefaces that work well together, especially now that we have so many more choices than before.

Awesome Fontstacks to the rescue. Here you can create your own stacks from 45 fonts that are free and licensed for online use. To create a CSS font stack, just visually select your headline font, then your body text font, and then download the CSS. The service also has a growing library of font stacks that you can use as is. To top it off, each font stack has a back-up stack for those using browsers that don’t support @font-face. You can preview the default fonts with a single click. (cc)

Reference site url:http://www.smashingmagazine.com/

Leave a comment

5 Web Design Trends for 2010


1. Oversized Logos/ Headers

Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything.

Main Idea: Huge headers that make your visitors remember you.

2. Sketch/ Hand-drawn Design

Hand-drawn design is not exactly new on the horizon, but we all know that it is still on the fringes of web design. Many designers admire the style but are afraid to create their own sketches because of the “I can’t really draw” attitude. If you look at the most popular hand-drawn websites (and relative to other types of trends, there are only a few), you will notice that most of your fellow designers can’t draw. These designs are not exactly headed to an art museum, but they do convey a sense of whimsy, and blur the line between cold web and personal interaction– the ultimate goal of the internet. If you can doodle, you can sketch for web design.

Sketch in 2010 will become more elemental, and not as much the main focus of a web design. It will be used to personalize standard web copy in new and exciting ways.

Main Idea: Sketch becomes an elemental part of corporate design.

3. Slab Typefaces

Slab typefaces are relatively new, although they’ve been around for over 200 years in traditional media. To get a good visual definition of slab typefaces, think of the old Wild West “Wanted” posters. Those bold letters are slab typefaces. Slab typeface is commonly all capital letters and are bold and imposing. Many designers have shied away from slab typefaces in the past because logos and headers were smaller and more understated. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice.

Main Idea: Slab typefaces is used to bravely express who you are.

4. Typography

Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. The idea of mixing varying font sizes together is completely unthinkable. Fonts are meant to be explored, twisted, and molded to fit your purposes. With the correct placement, a website that utilizes Typography as its main design element will be more interesting to a reader than overloading the same site with tons of photos.
Main Idea: Typography is young, but will continue to be a part of web design.

5. One Page Layouts

One pay layouts challenge you to edit away what’s unnecessary. In 2010, this trend will move away from the quirky navigation and become more minimal in its approach. Think of these websites as business cards. These websites will be more of a one-stop-shop for how to locate you and your work on various other sites– your blog and your social media hangouts.
Main Idea: One page layouts will be more about personal profiles and less corporate.

Reference site url:http://www.makeuseof.com/

Leave a comment

CSS image replacement for submit buttons


Expanding the techniques for CSS image replacement by Mike Rundle and Seamus P. H. Leahy, and inspired by a question posted to the WebDesign-L mailing list, I have developed an image replacement method for submit buttons, and in general for the button tag.

Using this method you’ll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input. And since button borders are erased, it’s also recommendable change the button cursor to the hand shaped one used for links, since this provides a visual tip to the users.

Here you can see examples of both variants of this method using a basic Google search box. This works in all the browsers in which image replacement works: Firefox/Mozilla, IE 5/6, Opera 7/8, Konqueror 3.4 & Safari (thanks to Philippe Wittenbergh for the feedback about Mac browsers).

Using text-indent for image replacement:


Using padding-top for image replacement:


You can use the button below to see the page without the CSS applied:


Note: The Google search boxes are used only as an example. Google and the Google logo are trademarks of Google Inc.
Known issues
For some reason Opera doesn’t process properly the cursor applied to button in both methods, so no handy cursor for Opera users.
The first method fails in Internet Explorer if the button is the first inline content of the parent block element. Adding some inline content before the button (like a simple  ) or setting the element to display:block will solve the problem.
Internet Explorer doesn’t process properly the name attribute of a submit button. This is usually irrelevant unless you rely on its value for some script processing. Here is an article about the problem of the submit button in IE (thanks to Malcolm Campbell for the tip).

The CSS code

#replacement-1 {
width: 100px;
height: 55px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(SearchGoogle.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}

#replacement-2 {
width: 100px;
height: 55px;
padding: 55px 0 0;
margin: 0;
border: 0;
background: transparent url(SearchGoogle.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
height: 0px;
}


Advertise
http://rcm.amazon.com/e/cm?t=s0a4f1-20&o=1&p=8&l=bpl&asins=B003M5GVJY&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifrhttp://rcm.amazon.com/e/cm?t=s0a4f1-20&o=1&p=8&l=bpl&asins=B000M8OX6W&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifrhttp://rcm.amazon.com/e/cm?t=s0a4f1-20&o=1&p=8&l=bpl&asins=B0031ESWP2&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifrhttp://rcm.amazon.com/e/cm?t=s0a4f1-20&o=1&p=8&l=bpl&asins=B003LY3IHO&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr

Leave a comment