How to Improve Your Web Design Skills

Great Improvement Methods

1. STUDY UI DESIGN PATTERNS

Check out websites like UI-Patterns.com to explore the best user interface patterns for the web. They come in nearly every category, and can provide great new ideas to get you out of your own interface rut. Do you tend to give your clients the same layout over and over? Do you use the same navigation look, or use the same format with forms? Check out the user interfaces of other websites with collections like these to gain inspiration and learn new habits.

User Interface Pattern Websites:

• UI-Patterns.com
• Quince
• Pattern Tap
• CSS Bake
• 10 UI Design Patterns You Should Be Paying Attention To
• Yahoo! Design Pattern Library
• Welie
• Patternry

2. PAY ATTENTION TO DETAIL

Look at the detail in everyday objects, and actively look at detail in other web designs. Practice adding more of this detail into your own designs. A great designer looks at texture, shadows, indents, shapes, cutouts, and much more. Don't get lazy! Look at and add every little detail into a web design from your source of inspiration.

3. SEO TECHNIQUES

Many clients love a designer that offers SEO services. Whether you'd like to do this or not, though, learn more about how to create and code websites that are SEO friendly. By adding it to your resume, you're helping your client's websites more, and therefore helping yourself more. The more successful your client's website, the more referrals you'll be able to get!

4. LEARN WEB DESIGN TRENDS

Trends are never something a web designer should solely rely on, but learning new trends is a great way to keep up with technology, and to keep you as a designer out of a rut. Of course, on another note, you'll never know when a client will see a technique they like on another website and want a similar look.

Do yourself a favor by keeping your designs modern, and by keeping your skills sharp by studying trending techniques.

5. KNOW TYPOGRAPHY WELL

Keep in mind that what will be viewed most on any website you design will be the text. Know how to design this text well. Having a good understanding of typography involves math, a good vocabulary of fonts, and more advanced technologies such as SIFR and Cufon. Learn about these things and learn how to use them.

Learn about baseline rhythm, readability issues for different fonts, text sizes and their effects, and more. There are plenty of useful tools/articles, such as the Baseline Rhythm Calculator, Better CSS Font Stacks, Typechart, andTypetester.

6. PRACTICE WITH COLOR

Have you ever grabbed a palette off of ColourLovers, looked at it for awhile, and then realized you had no idea what to do with it? If so, you may have some trouble understanding how one should use color. Learn about color theory and the psychology behind color to know what to do with a palette, and to learn how to create your own palettes better.

Image credit: Dey

7. KNOW JAVASCRIPT

Many web designers make the choice of whether to learn additional web development languages or not, but JavaScript is quickly becoming one of those languages that belongs more with the web designer than the developer. It is grouping itself with HTML and CSS in terms of when it should be used. As a web designer, know the basics of JavaScript, and learn about at least one JavaScript library to work with.

For a great start, check out The Bits of JavaScript that Every Designer Needs to Know, right here on onextrapixel.

8. BECOME A BETTER COMMUNICATOR

It doesn't just take the ability to make great websites in order to be a great web designer. Being a web designer involves knowing how to solve client problems as well. Client problems can be solved faster, more efficiently, and better with overall better communication skills. No communication is fine for personal projects because you already know what you need and want out of the project. With clients, it's different.

Being able to call a client with confidence and win over projects is a must for a web design business to survive. It is also important throughout the design process for getting the project done right the first time. Better communication means better final projects, and better final projects means more repeat business, happier clients, and more referrals!

9. DO SOME TUTORIALS

I used to not be a big fan of tutorials, as I felt they took a long time, and I just felt as though I was copying someone else's work, step for step. However, I soon realized that by doing a few, I began picking up techniques and best practices, and I also began using tools in some of my favorite software with more confidence.

There are a lot of tutorials out there, from coding to design, and some are for small effects or an entire project. Whatever sort of tutorial it is, it can be a great way to learn something new. Sometimes going through something with someone else can help one to pick things up better than reading a book on design theory or programming syntax.

Image credit: Jakob Montrasio

10. LEARN FROM YOUR MISTAKES

Making mistakes and learning from them is the absolute best way to learn. Think about your past web design years — were they perfect? Of course not. Take some time to reflect on some moments where you made mistakes, and then know and recognize the lessons learned. Literally take out a piece of paper and start writing them down.

Some lessons may be client related. Maybe you were not good about calling clients back or too nervous about client phone calls and meetings in the beginning. Where are you now? What were the negative consequences in terms of the project? How can you improve in that area today? Other mistakes may be skill-related. Perhaps you made a design, thought it was fantastic, but then got some negative feedback on it. How do you take the criticism? What were others saying was the biggest problem?

In a very skill oriented field like web design, mistakes are going to be made. The biggest mistake of all is not to learn from the previous ones.

11. GET TECHNICAL

Design is a lot of math. Learn more about the technical sides of design, rather than being in the habit of placing things wherever you please. If you've ever had the feeling that something was just 'not right' in your design, it was likely your subconscious telling you something was off-kilter.
Great things to look into are hierarchy, the Golden Ratio/Divine Proportion, Sine Wave Design, etc. Take a look at Smashing Magazine's excellent post on applying geometry and other forms of math in website design: Applying Mathematics To Web Design.

12. USE A SKETCHBOOK

Get in the habit of brainstorming your ideas on paper first. A good sketchbook is a decent investment for any web designer. Illustrate backgrounds, wireframes, or write down and organize ideas in writing. However you use it, use it for developing your skills and brainstorming effectively for the best final results.

Image credit: elbragon

13. GO OUTSIDE AND GET SOME AIR

In other words, get your brain going again. Sometimes the best web designs are formed from true, clean, inspiration. Get off of your computer and take a break. Don't go to the TV, or even to a book. Always take some time out every day to let your mind wander aimlessly to keep stress low and improve your natural design ability.

14. COLLABORATE WITH OTHERS

Discuss your projects, designs, clients, and best practices with other web designers. Discuss them with graphic designers and web programmers as well. Discuss them even with family and friends. Get opinions, see what others think of your work, and be motivated through that socialization.

Not only will you likely learn specific techniques from those in the same or similar professions, but you'll also be able to reflect on the reactions from those that aren't experienced in design. These people would be similar in thought to your own clients, so take their advice and examine their opinions well.

15. WHITESPACE: TAKE MORE OUT

This is not a movement to get every web designer into a minimalistic look. Rather, it is a movement to get every designer to see the fundamentals of great design. Do you over clutter your designs? Try to take everything out of your designs that is unessential. What is left?

By focusing on what is needed, we can prioritize the elements that make up our web designs, and organize them better overall.

16. RE-LEARN THE BASICS

Do you think you know the basics of everything that involves web design? Look them up again, and you may be surprised what your seemingly experienced mind has missed. Google things like:

• "Essential CSS techniques"
• "Basics of web usability"
• "Design principles"
• "Color theory basics"
• "Design theory"

17. KNOW THE GRID

Know what a web design grid is, how to use one, and get experience working with a popular grid framework, such as the 960.gs System. There are plenty of articles on how to use a grid, including Grid-Based Layout, 5 Simple Steps to Designing Grid Systems, Grid-Based Design 101, and Grid-Based Design: Six Creative Column Techniques.

18. BUY A NEW BOOK

Buy a new book or resource concerning something you don't have much experience in. Always be learning as a web designer, and always be expanding your knowledge. If you feel like you're in a design rut, there's nothing like learning something completely new to find inspiration. You'll immediately want to try out the new things you're exploring, and then you can add those skills to your already vast set of experiences.

Image credit: dareppi

Buy a new book that will teach you a new language, teach you how to do something specifically (like creating an iPad app), or a book that focuses very specifically on your own specialty. Learn anything that tickles your fancy - as long as it's new and intriguing.

19. ATTEND CONFERENCES AND EVENTS

Many web designers overlook the importance of attending web design conferences and events. They are a great place to network and to learn new things. Sometimes, the cost of the conferences is what gets many designers: they all have registration fees, and for many, the cost of traveling is an issue as well.

To combat these fallbacks, understand that the registration fee is relatively cheap for what you'll be getting out of it, and it is one of the most important investments a web designer can make in their field. Also, always be checking for events that are closer to your area to avoid traveling costs.

20. CONVERT YOUR OWN DESIGNS

If you don't already, begin converting many of your own designs from PSD to HTML and CSS. Many web designers choose not to do this on their own because it's time consuming and can be boring if it's just not something one likes to do. However, could you be one of those designers that doesn't do it because they don't know how? Do you know the techniques necessaray to convert your own designs in the first place?

Converting your own designs can alter the way you design altogether. You may find some usability errors you've been designing around, or you may begin designing with the developer in mind more. By coding your own designs, you can see and fully understand how your designs are functioning in the back-end - how easy it is for them to implement SEO techniques, their load time, etc.

Conclusion

Any designer can benefit from improving their skills, and the best designers know that improving a little bit every day is the key to success in this industry. As anyone can see, a web designer can improve in a variety of areas, from design to coding, and from business to networking. It doesn't have to all be about design specifically; what's important is that you, as a web designer, are growing professionally in any way for the future.

How do you improve as a designer? What do you do to learn new things and keep up-to-date on the latest trends, and how do you improve as a professional?

Best User Interface Design Resources for UI Designers ( beginners, intermediates or experts?)

If you strive to be a great designer (like most), then you’re more than likely to know that a web application or websites success many times rely solely on how well designed the User Interface may be. As you scale the web and even read books, there can be an influx of misleading information pertaining to the way you should design your UI.

When in reality you should do what works best for you and your users. Below you will find a variety of excellent User Interface resources that will allow you to access, redefine, and create a well designed User Interface. You should use these resources first as inspiration, and second as somewhat of a guide as to what your users may need when they come face to face with your UI.

Interface Design Libraries

1.) MephoBox

MephoBox houses various interface patterns and designs that showcase the different trends within them. Their goal is mainly to inspire designers and hopefully allow them to conceive a greater design then they had first planned out to make. You’re even able to vote on designs and leave insightful comments. You can also search and sort results in an organized fashion allowing you to easily and quickly find just what you need.

2.) UI Patterns

This beautiful and large collection of user interface patterns allows designers to absorb great inspiration. If you have a design to showcase, then you can publicly store these UI inspirations allowing others to become inspired by what you’ve submitted as well. It’s more of a user interface collaboration between the design community.

3.) Yahoo! Design Pattern Library

The Yahoo! Design Pattern Library, was formed and currently managed by the Yahoo! Developer Network (YDN). Individuals from around the world are all able to share design patterns to the web design and web development community. Through their newly launched forum, you can also conversate on several interesting UI subjects with fellow designers and also talk about designs in the pattern library.

4.) PatternTap

PatternTap is one of the most notorious UI pattern design libraries created and developed by Matthew Smith and Chris Pollock. Pattern Tap can mostly be described as a large gallery containing amazing web-baed User Interface designs. Pattern Tap also allows its users to upload their own patterns into their library, adding to the now over 7,000 UI patterns. This is a good resource and definitely a great place for inspiration.

5.) The UI Pattern Factory

Here we have the UI Pattern Factory which like the rest listed above is a UI design library/gallery. Not only are users able to upload patterns they’ve found, but their able to add and instantly share video entries that can help you gain a much better grasp of what the pattern is all about. This is a good source for inspiration, not only will you get a visual graphic as an example, but you can also get a video outlining the details of why this user interface pattern was chosen.

Interface Design Blogs

6.) UX Magazine

UX Magazine has set out to deliver valuable information and guidelines that will help the designer create a much better user experience. They also claim to cover the best new resources and articles on UI design. As an online magazine, they also give way to the interaction between fellow designers by letting everyone discuss quality tips, share experiences and new ideas.

7.) UX Booth

UX Booth is beautifully well maintained community connected through a blog solely positioned on the web to sharing valuable knowledge and resources with the User Experience Community. Its online presence delivers informative articles and resources on usability frequently. It also speaks heavily on other subjects that go hand-in-hand with UI such as Interaction Design.

Boxes and Arrows

Boxes and Arrows, an active online publication geared towards the how designs interact. Here you will find a good amount of information that speaks on effective user interface designs how to design one as well. Boxes and arrows is maintained by a professional and academe-centric community that pumps out articles that are informative and well researched. So it’s facts with proof, not just theories here.

Signal vs. Noise

Signal vs. Noise is 37signal’s blog. Their rapid and valued experience in developing applications with amazing user interfaces (such as BaseCamp and BackPack) leaves them as one of the most sought out resource for building applications from scratch (mainly their interfaces). Read their blog for some of the most interesting experiences with user interface design and more.

Konigi

Konigi provides the design community with treasured tips, tools and useful techniques that will help you become a much better User Experience designer. They frequently monitor leading designers, sites, and applications that are subject to produce quality user experiences and then they publicize these findings for the entire design community to read.

Interface Design Inspiration

ate bits

The ate bits site is simple, yet sophisticated in its design. The large icons make it easy to choose which product you’re intersted in, and when you click on the icon it unfolds into a single page where you’re able to view the features, screenshots, and reviews. Meanwhile at the top of the page, the other icons for all 2 remaining apps are visible, just in case you want to smoothly switch back and forth between the 3.

 Giant Creative

Not only is the typography here amazing, but the way the top navigation menu uses the hover effect to grab your attention, and the use of a scrollbar with a beautiful link on the bottom right is amazing as well! The entire interface is easy to interact with and scaling around through the site, you can’t get lost.

IconDock

IconDock is a very flexible website in terms of functionality and usability. It’s user interface is vibrant and features a drag and drop function that makes purchasing icons much easier and quicker.

 Versions

The Versions website utilizes dark colors, however, using the website you’re able to see that the dark color has no effect on usability. This site is based on a single-page layout and defines all of its elements in an clean and organized fashion for better navigation.

 Pure Volume

Pure Volume has a beautiful web site design with an even better user interface. Here we see 2 seperate menus that are very easy to navigate, every section is organized and cleanly seperated, and it has a nice blue outline effect when you hover over an image in anyone of the 3 middle sections.

 CSS Edit

This is one of the easiest to navigate through application websites I’ve come across. Descriptions, features, details, and images are all nested well within the websites design. This is a good example of a simple, informative, and functional website that hosts applications.

Pallian Creative

Adarsh Pallian has a well designed website that’s not only eye-catching, but allows the user to interact freely. The top nav bar consists of three links for ease of use. Elements are well spaced and beautifully aligned.

Web Applications and Their Interfaces

 SUBERNOVA

Here we have SuberNova, it’s a project management tool that has an easy to use web interface. Once you begin to add projects and users the information begins to flow freely. A small box pops-up when you decide to create or edit an invoice. You can easily save the edited invoice, cancel, or delete it with the click of a button (located at the very bottom). You can also quickly add, manage, and contact clients with simplicity. SuberNova’s interface is dark, however the designers made it easy for your to view the contrast between the information and elements of design.

TypeTester

TypeTester has a pretty straightforward interface. The main purpose of this app is to allow the user to enter a sample text then choose 3 different types that can easily be modified by size, alignment, color and more. Then the text is instantly outputted in 3 different formats: regular, bold, and italic.You can then click on a small box at the top right-hand corner that will pop-up and give you the CSS for the corresponding box you chose. The process is simple, and using elements such as text areas, scroll down boxes, and pop-up boxes is fairly easy as well.

 PXtoEM

This web application has a variety of functions that are possible thanks to JavaScript. We begin by selecting our body font size within the first column, once you do this you’ll see that the application will automatically have chosen a conversion of your font within the second column. Then you can either move to the third column and customize your conversions or grab the necessary CSS code by clicking on the middle tab within the top navigation bar. PXtoEM uses smooth shades of grey to create a contrast between the rows. This helps you not to get lost. When you choose the font size you’re looking for, then that specific row is highlighted in dark red. All of these features make it much easier for you to use the application while minimizing the chance of errors.

 Lets Freckle

LetsFreckle is one of those beautiful web applications that come great features and eye-popping usability. As soon as you login the first thing you see is the navigation bar at the right-hand side. This makes it a thousand times easier to remember where you’re at while you’re navigating through the pages. Viewing report are is a sift, and changing between dates/times is even easier. Overall, LetsFreckle has an amazing interface that follows through with amazing usability.

 Twitter

Twitter’s an application that will continue to be complimented on the super well job they’ve managed to do when it comes to usability. This is one of the easiest to use web based applications that exist. It all starts from the time you reach the homepage, you hover over the sign-in button at the top, the sign-in box rolls out, and you login, till the time you scroll through your timeline and retweet appealing notifications. Everything is easy to work with, and you don’t even have to refresh your page (thanks to AJAX) to know that you’ve received new tweets.

 Kuler

Adobe’s Kuler is a rich color combination tool. It’s easy to experience new combinations due to the way the combinations on the left side-column load up instantly at the top. If you click on the featured combination it will “unfold” and let you see the colors at greater lengths. Although the applications website is a bit crowded at first, the most important elements (color combinations) are very well organized.

 CrayEgg

CrazyEgg is an amazing web application that makes it easier for everyone to track usability on a website. Being a usability app, I’m sure they needed to make their application extremely efficient and easy to use. Wouldn’t make sense to talk the talk about usability but not practice it at all. The most enticing thing about CrazyEgg’s usability would be how easy the interface allows you to interact with various aspects of your account. For example, when you’re reviewing how many clicks were made by a visitors mouse to your website, all you have to do is click on the plus or negative button and a small box will appear with the proper details. I was also amazed at how easy it was to navigate through your entire account.

Google Analytics

Landing a spot on this list, non-the-less is the powerful web application known as Google Analytics. The interface flows freely and it is extremely straightforward. Every element of design is nicely organized and technologies such as Flash behave well. With just a glance you can get a quick and informative look on the analytics of your website, if you wish for a more detailed overview, that’s readily available as well. Hard to get lost within the control panel of this application, pages aren’t overcrowded, easy to navigate through, simple ways to control the look and feel of elements, and beautifully contrasting colors that help guide you through every section. This is what great usability looks like.