Web Design

The essential list of CSS tips, tricks & hacks

The essential list of CSS tips, tricks & hacks

I had been working on CSS heavily for this couple of weeks. Because I’m not an experienced CSS coder, I encountered many problems and get frustrated in order to get the code right and functional on majority web browsers. Luckily there is a lot of useful CSS tips and tricks can be found on the Internet that helped me solved many problems and make me smile.

I found many articles on teaching the best ways to work with CSS. It is very handy and I learn a lot from them. At here, I compiled a list useful CSS hacks, tips and tricks so that everyone can quickly find the links and start learning from the experts and becoming a smart CSS elite! Continue reading

Inspired by Nature: 12 websites with grass

Inspired by nature: Websites with grass

This is the second episode of Inspired by Nature web design series. The first series talks about websites with wood, and now we move on and take a look on other nature elements which integrated into website design: GRASS. From some grass inspired research, I found 12 websites use grass as part of web designs.

The natural green colors of grass is a instant attraction because it feels fresh, the richness in texture, and giving a sense of depth. Many uses grass as background and use it in website header. Company that provide grass related services also implement grass in their home page too. Besides that different execution of grass also can be seen. Continue reading to find out the 12 grassy websites! Continue reading

Inspired by Nature: 27 websites with Wood

Inspired by Nature: 27 websites with Wood

Nature elements especially wood can be seen in many website design nowadays. The natural textures and shading of the wood surface and color can make a website looks rich in texture and green in feel. Even well known web designers like Alex Buga and Shane Seminole Mielke also used wood as part of their portfolio site design.

Wood mainly being used as a website’s background image, but there’s some other websites use wood for other purposes as well. It’s fascinating to see how different wood color and texture can give different feelings to enhance the design. However, this does not mean that simply using wood texture can make the design nice. Many other design elements like font, color schemes etc has to take into consideration as well, in order to be harmonic with the wood. Well, you can learn from the 27 good website designs that with wood.

Continue reading

IPSERVERONE, where is your logo?

IPSERVERONE, where is your logo?

I really don’t know IPSERVERONE has change the look of their site until today I clicked on their ad to check out what promotion they are having now. It’s loads a total new design and to be honest the design is badly done. The new design looks unfinished, and worse than their previous design. And the most important thing is, where is the logo?

Not sure whether they purposely done that or are in the middle of redesign a new logo, but certainly they are committing branding crime #1: Missing Logo. I know there is a “IPSERVERONE” logo text on the picture below, but that’s not serve the role as the identity of the company! That’s a silly mistake. Their existing logo is very nice and they should put it up as soon as possible!

Continue reading

4 Japan web design galleries that worth visiting

4 Japan web design galleries that worth visiting

There is so much nice web design galleries out there like CSS Beauty, The Best Designs, Best Web Gallery and many more for web designers everyday design inspiration. They showcases the great web design examples from all around the world which displays innovative web surfing experience and design aesthetics. But recently I ask myself, is there any gallery that showcases web designs from Japan? The answer is yes!

From little research on the net, I found four sites that is worth take a visit. Most of them are in Japanese language, but with the help of thumbnails and free translation services out there, I think the language is not the barrier anymore. Let us experience the beauty of Japanese web design!

Continue reading

60 horizontal navigation bar design inspiration

60 horizontal navigation bar inspiration

Horizontal navigation bar is one of the basic elements of web design. It occupy less space and grouping the menus horizontally can make page navigation easier too. Plus, it can be customize to be fitted to any kind of designs, from clean and sleek to retro wooden style. Here, I presented you 60 good looking horizontal navigation bar designs that I collected through out my web design research.

I found out that games related sites especially online games utilized horizontal navigation bar, because it can display the menus without using a large space. Navigation bars that build using flash can have cool rollover animation, however horizontal bar also achievable by using CSS list style and rollover effects if you know the ever popular sliding door effect. But in here, I won’t talk about the technique but pure beauty of navigation bar design for your design inspiration and reference. I separated into 3 categories: games related, non games related and good design examples from DeviantArt.

Continue reading

Super lists for web designers

Super lists for web designers

With the booming of the Internet, we came to a stage where information obtaining is so much convenient nowadays. Like web designers, using the web as main source of information and resources is a very natural thing. But, the information available out there is so much until I think it is impossible to bookmark and remember all those great sites. However with the existence of super lists, it makes the designers’ life much easier!

I stumbled upon 4 sites that collecting sites that links to useful resources, articles, and tutorials across different kinds of fields, for example CSS, color schemes inspiration, free stock images, fonts, gallery showcase, Photoshop tutorials and many many more. These 4 sites are a must bookmark for all web designers. Read on to get to know what 4 sites they are.

Continue reading

Destroy the Web 2.0 look

Destroy the Web 2.0 look

Until now, I’m still embracing the beauty of web 2.0 design: The glossy effect, the badges etc.. But the presentation of “Destroy the Web 2.0 Look” by Elliot Jay Stock has changed my perception and makes me understand even more about what is the real Web 2.0. Elliot presented this topic in FoWD event in New York and for people like me who couldn’t attend the event, there is a slideshow which I embeded below and PDF document for download.

He emphasize that “Web 2.0” is not a design aesthetic, and to encourage people to break with overused of the current web design trends. In the presentation there said that the characteristics of Web 2.0 that coined by Mr. Tim O’Reilly does not touch anything about design at all! So, don’t blindly use the style but use it with rational, and come out with own concept and design. Don’t follow the cliche and pursue something new!

Continue reading

Spice up your design with 56 Photoshop layer styles

56 Photoshop layer styles

I had been working with Photoshop for more than a year and through out this year, I designed works by using this great tool, really can’t live without it. In Photoshop, the layer blending had been the most frequently used in most designs. By applying layer styles, the design won’t be flat and it looks good. I used a variety of style combination to achieve the desired result. And here, I decided to save all the styles that I created for backup purposes, as well as share out here!

Please view all the 56 layer styles bigger at the picture below. Most of the styles involve black, gray, and orange color, because these are the colors I used the most. Included also the styles that I used for creating the gaming window tutorial too. So feel free to download and play around with it! Also check out the following 10 places to get awesome deals for graphics and other design tools.

Continue reading

Nice Site: Urban Soldierz 2

Nice Site: Urban Soldierz 2

Last few days back I stumbled upon Urban Soldierz 2 website and was attracted by its rich textured urban environment design. Urban Soldierz is a graffiti artist collective that born in Spain, and their artistic works were displayed in both old school graffiti to new school graphic design. Now consists of 12 members, Urban Soldierz try to be an urban artists platform. Their works are magnificent, so do the Urban Soldierz homepage too.

The website was dominated by brownish, sepia color scheme giving a very old school feel, and it has a very strong urban feel in it. Layout was based on urban elements like concrete wall, metals, barbed wires, bricks, torn papers, street lights, grungy texture… very rich of raw street sense. If your monitor resolution is not big, you can move your mouse to move up and down, left or right to view the full design of it. Basically the full look of the website is shown below.

Continue reading