How To Become Pro Web Developers and Designers With Top 10 Pro Tips and Tools

Web development and design are two great skills to have because they allow you to work from anywhere and create amazing, beautiful sites and apps. Nonetheless, it can be hard to get started when you don’t know what to do. We can help you out with these ten great tips and tools.

10. Get Educated
Tips and tools are useless if you don’t know the basics. If you’re still struggling with the initial concepts of programming and design, we’ve got a few lessons that can help you. To get started with web development, our Lifehacker Night School series can teach you HTML and CSS as well as JavaScript, which pretty much covers the basics. We also have Photoshop lessons which can teach you how to mock up a web site layout. We also have a basic lesson on color theory. To pick up a few more design skills, check out this list of resources. It’ll help you get inspired and discover ways to learn more of the basics. If you want to learn more, check out Code Academy for additional programming lessons. When you’re ready to take your first coding project from start to finish, be sure to read this.

9. Build Up Your Font Library
Picking the right font can make or break a great design. I mean, just imagine replacing every instance of Helvetica Neue with Comic Sans. Right? Right? Whether you’ve got a font of font knowledge or you don’t know your serifs from your sans-serifs, you can always benefit from a good font collection. My favorite resource is DaFont, but that’s just one of many. FontPark offers over 70,000 free fonts and YourFonts will even let you make your own. For more places to find free typefaces, check out our fonts tag page.

8. Use Dummy Tools
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Man, I could go on writing that genius material for pages with this Lorem Ipsum text generator. If you’re not familiar, Lorem Ipsum (or Lipsum for short) is what many designers and developers use to generate fake placeholder text for their designs. You don’t necessarily have actual content when you’re creating a design for a web page, magazine, or other layout with lots of text. Lipsum generators supply you with placeholder text designed to fill titles, sentences, and/or paragraphs when you’re lacking. But you don’t have to rely on the standard stuff. There are many varieties of Lipsum generators, such as Cupcake Ipsum. Bear claw sugar plum sweet roll. Sesame snaps gummies gummies sweet roll oat cake chupa chups lollipop lemon drops!

Text is not the only thing you might need to generate for your designs. What if you don’t have images? The Dummy Image Generator is basically the Lipsum equivalent for pictures. You just enter a size and it spits out a placeholder. This is very handy during both the design and development processes.

7. Steal
You know how there are no original ideas and everything is a remix? Don’t feel like you have to come up with a design nobody’s ever seen before or original code when there are tons of existing code snippets freely available on the web that you can use as you please. Great ideas come from building on the ideas of others, so feel free to steal a little bit. Obviously you don’t want to copy anyone’s idea verbatim or use anything without permission, but you can gain a lot of inspiration from looking at the work of others and borrowing little things they do to make your design look great and your code even more powerful and efficient. I like Snipt for finding code snippets. When it comes to design, you just need to browse the web. Pinterest is quickly becoming a large resource for posting examples of great design, but you don’t really have to look any farther than the Lifehacker community. We have a number of designers in our midst and recently we featured the landing pages of a few along with tips on how you could learn from their process. Check it out and see if there are any techniques or ideas worth “stealing.”

6. Pimp Out Photoshop
For most web designers, Photoshop is an essential tool. It’s capable of a whole lot, but you can expand its capabilities by adding new actions, brushes, shapes, and more. Actions are basically macros for Photoshop, allowing you to automate tedious tasks you don’t want to do “by hand.” Here are 100 existing Photoshop actions to expand your collection, but if you need something specific you can always just create your own.
Expanding your shape and brush collections can also provide you with new options. Shapes give you vector images you can use in your designs, and brushes will let you paint with a variety of objects and styles. This ultimate shape collection should give you a good start, but you’ll quickly find that if you perform a web search for “Photoshop shapes” and whatever type of shape you’re looking for (start with silhouettes for a good set of options) you’ll turn up some good choices. You’ll find that Photoshop brushes are in an even greater abundance. Just take this collection of 2,000 for example. Brushes can allow you to paint with shapes, emulate real paintbrushes, or even create interesting effects. It’s also easy to create your own.

5. Quickly Generate Complex CSS Code Visually with a CSS Generator
The CSS3 Generator, the CSS3 Maker, and the CSS3 Border Radius Generator are all great examples of ways you can generate the more complex CSS code you often forget. Drop shadows, animations, and rounded corners are very cool effects you’ll want to employ on occasion, but since you’ll use them less often and they require a bit more effort than your average style it helps to have a generator handy to create the code for you. It’s important to know what you’re doing when you’re writing the code and to understand the code that comes out of the generator, but you can save yourself a little time when you’re in a hurry or just can’t remember the exact syntax. Here are plenty more you can add to your arsenal.

4. Download Free Resources
Design can be tough when you have to take your own photos, draw your own pictures, and create virtually everything from scratch. Sometimes it’s best to have a little help when you, say, need to add an iPhone 4S with interface elements to your layout. The internet is filled with plenty of free and available Photoshop-ready resources to help you enhance your designs without putting in additional hours of work. Take these 30 free gadget PSDs for example. Most of the time, all you have to do is search for the item you want. That said, you can find plenty of great images, backgrounds, icons, and more at sites like psdGraphics, The Noun Project, Design Kindle, and PSD Collector. DeviantART can also be a good resource. Some assets will require attribution and others are simply available for your benefit with no reciprocation required. You don’t want to overuse these great resources, but they can be very helpful when utilized in the right ways.

3. Get a Great Programming-Friendly Text Editor
Just as Photoshop is an indispensable tool to a web designer, a great programming-friendly text editor is to a programmer. We have favorites for Windows and OS X, so be sure to check those out if you’re looking for some good options. You may also want to check out our favorite text expansion apps as well so you can store your favorite code snippets and insert them into your code with just a few keystrokes.

2. Know How Your Site Will Look on Different Kinds of Screens and Web Browsers
It’s easy enough to put together a design for a web site when you’re the only person who’s viewing it. When it’s live on the web, however, it’ll be showing up on screens of all shapes and sizes in various web browsers. Before you deploy, you’re going to want to test and make sure things look the way you want. Screenfly can show you how your site will look on different displays. Browsershots will let you see how your site is rendered by many different browsers running on Windows, OS X, and Linux. All you have to do is choose the browsers you want and wait for screenshots to appear. It may not be as efficient as testing your site on an actual computer, but it’s certainly much more affordable.

1. Use a Framework
Frameworks can make the development—and even design—process go a lot faster. This is because most web projects are not particularly unique in the way they’re created. Just as you’ll end up stealing little ideas and code snippets around the web, you’ll also end up borrowing grand concepts and principles that have long been standard. Frameworks let you take advantage of this by taking a lot of the effort out of standard coding. This saves you time and a lot of the headache that often comes with the tedious process of starting from scratch.

So what frameworks should you use? On the development side of things, Blueprint is great for CSS layouts, Ruby on Rails for Ruby programmers, Zend and CakePHP for PHP developers, and Django for Python coders. You generally won’t hear the word “framework” in a conversation about design, but the idea does translate nonetheless. The Grid System and the 960 Grid are two great examples. If you want to save a little time by following principles that have worked for ages, check out a framework. It’ll help you adhere to best practices, and you won’t regret it.

There are so many great resources out there it’s hard to keep the list to just 10 items. For more, check out Kuler, Paste HTML, Overcoming Creative Block, Behance, Forrst, UI Toolkit, What The Font, and Wirify. If you have any other tips and tools you’d like to add, please share them in the comments!

One Comment

  1. A WordPress Commenter September 13, 2017

Leave a Reply

Your email address will not be published. Required fields are marked *