Table of Contents
Web design is easily the best professional path for all those who can wrap their minds around coding, but at the same time have a strong need of expressing themselves creatively.
Needless to say, web development and design are often considered hard to beginners who have to make their way around a labyrinth of resources and software. Here are top 10 tutorials, tips and tools to help you make your first steps in becoming a killer web designer.
1. Consider using a framework
It’s clear that frameworks can make development and design process much faster. As you delve into the field, you’ll notice that the majority of web projects aren’t unique, so sooner or later you’ll start to steal snippets of code here and there or borrow large principles and concepts that have become standard practice.
That’s why you should consider using frameworks – they’ll simply make your life easier and provide you with a structure. Starting from scratch is challenging and using a framework will surely save you lots of time which you’ll be able to invest in more interesting areas of your project.
Among the most popular frameworks you’ll find Blueprint which is great for working with CSS, Zend and CakePHP for PHP developers, Django for those who dapple into Python and Ruby on Rails for Ruby enthusiasts. The idea of a framework translates into the reality of design as well – you can use 960 Grid or the Grid System to help you follow best web design practices.
2. Learn about colors
If you’re a web developer or designer, there’s no end to education. Have an open mind and be ready to learn new things every day. One of the most important lessons for a designer is about colors – we often see a really good design concept completely ruined by a poor choice of colors.
In fact, color is one of the key components of every great design – once you strike a balance between typography, layout and color, you can be sure that your design will capture everyone’s attention (in a good way!).
Learning about colors will also help you to establish clearer visual hierarchies in your designs, consequently taking your templates into the next level. If you’d like to learn about color in web design, there are two tutorials you must absolutely check out: The Importance of Color in Web Design and Visual Hierarchy in Web Design.
3. Expand your Photoshop
If you’re a budding web designer, you probably realize that Photoshop is your best friend. The thing about Photoshop is that it’s got impressive capabilities, but they’re all expandable. You can add new shapes, actions, brushes and other elements to enrich your designs.
Just consider actions – they’re basically macros that allows you to automate boring tasks you’d rather not do manually. You can expand Photoshop with a 100 different actions and if you’d like something specific, you can even create your own action.
New brushes and shapes are great as well – you’ll be able to paint in different styles or use new vector images in your designs. In fact, every time you decide that you need a new shape, you can perform a simple web search and you’ll be presented with a nice selection. Expanding Photoshop is the single best way to power your creativity.
4. Build a font library
Typography is all the rage right now and users will notice your choice in this regard. It’s true that the right font can make (or break) a great design, so it’s in your interest to compile a comprehensive font collection. This is a good move, especially if you’re a font newbie.
Try resources like DaFont or YourFonts – some of them will even let you to make your own typefaces! There are lots of repositories of free typography, so just have a look around the web and educate yourself – not knowing your serifs from sans-serifs is a sin in web design.
5. Best HTML practices for beginners
Coding is an essential part of web development and as a designer you’ll have to delve into HTML and CSS at some point in your project. Make sure that you’re educated on the topic – check out this great HTML tutorial 30 HTML Best Practices for Beginners .
You’ll find lots of different skill levels, but this tutorial is perfect if you’re just diving into the world of web development. Even if you’ve got some experience in HTML, this tutorial features so many interesting tips that it’s bound to make you better and quicker at coding.
6. Feel free to use ready code snippets
Just like in art or fiction, there are no original ideas in web design – in short, everything is remix of something else. If you don’t think coming up with an original design is a must or you’d like to make your life easier, you can just use ready code snippets which are freely available on the web.
Uniqueness is not the most important thing in web design – in fact, many great ideas originate from building on the ideas of others. This isn’t to say that you should copy someone else’s idea, but it’s alright to get inspired and borrow little things from others once in a while.
Snipt is a great tool for finding code snippets and if you’re looking for inspiration, just go to Pinterest or have a look at the Lifehacker community which is full of web designers and features their landing pages with tips on how you can learn from them.
7. Benefit from CSS code generators
Speaking about making your life easier, if you’re planning to code in CSS, there’s nothing more comfortable than a code generator. Be it CSS3 Generator, CSS3 Maker or CSS3 Border Radius Generator, using such tools will help you to generate more complex CSS code.
You can use such generators for creating animations, rounded corners or drop shadows – they all require a bit of effort and what’s the point of losing time creating them when you won’t be featuring such elements regularly in your designs? Be careful about the generated code and make sure that you understand it – it’s about saving time, not taking the easy way out.
8. Find free resources
Photos, pictures, elements and other things make up for a significant portion of your time spent on creating a design. That is, if you decide to make them from scratch. If you’d like to save some time, however, just check the vast online resources which are completely free to use.
You can find great images, icons and backgrounds on websites like psdGraphics, Design Kindle, The Noun Project or PSD Collector. Interestingly, DeviantART can sometimes serve as your go to resource – remember that some of those assets will require attribution. When using free elements form the web, be careful not to go overboard – your clients will notice.
9. Test your design
It’s easy to get wrapped up in your bubble world of web design, but remember that you’re building something functional. And if it’s supposed to work perfectly, you should definitely test it. Once your design is live, it will be accessed from various screens and devices.
That’s why it’s a good idea to test your design before you deploy it to make sure everything looks perfect. Use Screenfly to see your design on different displays and Browsershots to check how your design is rendered in different browsers running on Windows, OS X, and Linux. Seeing those screenshots, you’ll be able to quickly react and eliminate potential problems before deploying your design.
Have you got any tricks up your sleeve which helped you to become better at web design and development? I invite you to share them in your comments so we can all learn from your experience.
