WEBmagix

Web Design Community Offers Advice To Beginners

surajit kayal — Mon, 23 Aug 2010 10:21:40 +0000

At one time or another, we are all newbies. That’s right: you can deny it all you want, but not one of us got into this game with a full deck stacked in our favor. We entered as newbies, born fresh after the start screen loaded. However, unlike in a game, we are not immediately launched into a tutorial level to learn the ropes in this new world — what to avoid, how to progress, etc. And if we feel overwhelmed by our newbie status, we may not be able to find our way to the tutorials and guides that the community has put together to help us sort all of this out. So, feeling very alone in all this is easy.

Design Is Only As Deep As It Is Usable

surajit kayal — Mon, 23 Aug 2010 10:20:18 +0000

There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. “It’s what’s inside that counts” and “Beauty is only skin deep” are a few simple examples. Because the Web design industry is now flooded with a lot of raw talent, and because virtually anyone can create a “beautiful” website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.

In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not superficial, but rather improves and enhances the user experience.

10 Useful WordPress Security Tweaks

surajit kayal — Sat, 03 Jul 2010 04:56:07 +0000

1. Prevent Unnecessary Info From Being Displayed
2. Force SSL Usage
3. Use .htaccess To Protect The wp-config File
4. Blacklist Undesired Users And Bots
5. Protect Your WordPress Blog From Script Injections
6. Fight Back Against Content Scrapers
7. Create A Plug-In To Protect Your Blog From Malicious URL Requests
8. Remove Your WordPress Version Number… Seriously!
9. Change The Default “Admin” Username
10. Prevent Directory Browsing

Source: http://bit.ly/drXo8o

20th Year of Photoshop. Happy Anniversary !

alen1982 — Sat, 20 Feb 2010 05:37:09 +0000

http://cache.gawkerassets.com/assets/images/4/2010/02/definitive-photoshop-timeline.jpg

CSS3/ JavaScript Coding Techniques

surajit kayal — Mon, 15 Feb 2010 11:18:37 +0000

Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

How To Create A Vertical Sliding Panel Using jQuery And CSS3
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Awesome Overlays with CSS3
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Wireframing Toolkits

surajit kayal — Mon, 15 Feb 2010 11:10:48 +0000

Quommunnication Stencil Kit
A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids

Facebook Applications Stencil Kit
A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

Free Sketching & Wireframing Kit
The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.

Styling Web Links

surajit kayal — Sat, 23 Jan 2010 11:06:08 +0000

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.

et’s start by looking at CSS selectors and pseudo-classes:

a:link { }
Unvisited link.
a:visited { }
Visited links.
a:hover { }
The user mouses over a link.
a:focus { }
The user clicks on a link.
a:active { }
The user has clicked a link.

Some Examples:

The TLC

uses not only plaint text links, but also icons to communicate the corresponding file types.

Dont forget about visiting link

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.

Always link your logo to the home page. Most users expect this convention across the Web. That said, don’t assume that users know this. Regular surfers expect it, but a number of users still look for the “Home” link.

Object Oriented CSS (OO CSS)

surajit kayal — Tue, 27 Oct 2009 06:16:20 +0000

http://www.slideshare.net/stubbornella/object-oriented-css

15 sites web developers and designers should know

surajit kayal — Mon, 12 Oct 2009 05:51:10 +0000

This is coolest thing for all web devs n designers.

http://www.catswhocode.com/blog/15-sites-web-developers-and-designers-should-know

Social Media Icon Set for Free

surajit kayal — Sun, 04 Oct 2009 04:51:05 +0000

In this post we release a new and free Social Media Icon Set: A Custom Icon Set, specially designed in a high quality and unique style for our readers that will hopefully meet your expectations and will come in handy in your projects.
6 beautiful and clean icons: New RSS, Twitter, Del.icio.us, Stumble Upon, Facebook and Email. This set was designed by IconShock and released exclusively for Noupe and its readers.

Download the set (.zip, including .png source files, 1.2 Mb)