Every web designer has a few secrets up their sleeves. Hard-won workflows, secret techniques, and insider knowledge are the hallmarks of actual experience and the difference between good and exceptional web design courses.
We’ve managed to persuade some of the web’s busiest developers and designers to share some of their most tightly guarded tactics and tips in this article. It’s a huge collection.
You’ll learn about hidden capabilities of well-known tools, beta services that are causing a stir in the design world, and CSS methods that make website creation for numerous platforms simple. Whether you’re new to web design or a seasoned pro, you’re sure to find one or two pointers here that will change the way you work.
Coding that is more efficient
01. CodeKit for reloading the browser
CodeKit allows you to see changes in your browser without having to reload it.
“CodeKit is a must for Mac users,” adds Keir Whitaker, co-founder of Viewport Industries. “The browser reloading feature alone is well worth the modest fee. The days of having to forcefully refresh your browser in order for updates to take effect are long gone.”
02. Make global adjustments
Elliott Fienberg, a musician, producer, and web developer, has a coding trick that will assist speed up the early stages of your design work. You can apply global modifications to a whole page by utilizing the wildcard CSS rule, which uses an asterisk as the selector. To change all the fonts on a page to sans-serif, for example, use the following syntax: *font-family:arial, helvetica, sans-serif;
This is a terrific designer’s hack to keep in your back pocket while you’re working on a project. Of course, leaving it in your live code isn’t a good idea, so use this trick cautiously and sparingly!
03. Create gaudy outlines
File this under “simple acts of genius” – a tip from Web Standardistas’ Christopher Murphy that makes cross-platform design a breeze. “When working with media queries, use a bright color as an outline,” Murphy advises. “Outline:10px solid green/red/yellow/blue; is an example. This allows you to know which specific rules are being applied to whatever you’re looking at right now.”
04. Make sure you have enough characters.
“For easy reading, 45-75 characters per line is usually accepted,” explains Trent Walton, founder and designer of Paravel. “There’s an easy way to make if your responsive or fluid design is compatible with this. Put an asterisk at character 45 and an asterisk at character 75 in a line of dummy text on your website. Now test the site to see if it resizes properly within these limits.”
05. Use FitVids to embed videos
Although HTML5 has made video embedding easier, designers still face two challenges. The first is to make video resize responsively, and the second is to make sure that resizing for Flash degrades gracefully when HTML5 embedding isn’t possible. FitVids is a jQuery plugin that handles all of this for you.
Working with visuals
06. Smushit (reduced image size)
Smushit removes superfluous bytes from picture files using optimization techniques.
Sites with well-optimized pictures load faster and perform better across a wider range of devices. Martin Beeby, a web developer and Microsoft evangelist, says, “SmushIt is a wonderful alternative for reducing image file sizes,” and we agree. You might also want to try ImageOptim, which Trent Walton recommends.
07. Save images as an 8-bit PNG
Martin Beeby offers a tried-and-true method for dealing with PNG image files. “If you’re exporting a picture from Photoshop to PNG and it doesn’t need to be translucent,” he suggests, “consider exporting it as an 8bit PNG.” “In most circumstances, the image quality will be unaffected, but the file size will be drastically reduced.”
08. Image conversion using PNGQuant
There is a service that can assist you preserve transparency while reducing file size. PNGQuant is capable of converting 24/32bit PNGs to 8bit PNGS while maintaining transparency. There’s a bit of opulence for you.
09. Make use of GuideGuide
GuideGuide is a Photoshop panel with columns, rows, and midpoints.
According to Rhys Little, director of digital marketing agency Plug and Play, “the finest websites are designed to a grid.” However, creating grids in Photoshop on a regular basis might be tiresome. He suggests Guide Guide: “It simplifies the process and saves you a lot of time when it comes to building bespoke grids.”
10. Work with a 12-column grid.
Another piece of advice from Rhys Little: “Using a grid with columns that are nicely divisible by 2, 3, and 4 is usually a good idea. As a result, a 12 column grid is one of the most widely used and adaptable grids.” More web design-friendly grid layouts for a variety of apps may be found at 960grid.
11. Get some color ideas
Martin Beeby has discovered an application for Adobe Kuler that we hadn’t considered: “I’m color blind, so when I’m putting color palettes together for a project, I always grab for Kuler,” he explains. Color Lovers, a creative community where members discuss color schemes, designs, and ideas, is another site he recommends.
Typography on the internet
12. For typographic palettes, typecast
Typecast makes it simple to create a typographic palette.
Typecast, an app created by the outstanding team at Belfast-based design business Front, simplifies the process of creating typographically rich websites. “It allows you to quickly create and compare typographic palettes,” Christopher Murphy exclaims.
13. Use Google Fonts with Typecast
Monotype and Google have collaborated to release a new, free public version of Typecast, which can be found in Google Fonts. It allows you to choose any font from the Google Fonts page and then access the Typecast app via a link.
From there, you can use that font on any length of text and use a variety of type parameters to create clear, readable type systems by adjusting font size, weight, and line spacing, among other things. To share with others or merge with comps, you can export your work as production-ready HTML and CSS or PNG files.
Font Squirrel is a website that offers free online fonts.
Free web typefaces have truly matured. There’s no need to put up with the typography issues that the previous generation of web designers faced with thanks to Font Squirrel, Google Web Fonts, and the @font-face feature in CSS3. Here’s a list of some of the best free web fonts available.
Make the ideal location.
15 Use Dropbox to keep track of your revisions.
Dropbox Pro can be used as a straightforward version control system.
As a basic versioning solution, Keir Whitaker recommends Dropbox Pro. You’ll get 30 days of rolling versioning of your files in addition to 100GB of storage. “More than enough to assist you with those’accidental’ deletes,” Whitaker says.
16. Take it easy.
Visual artists are prone to get out their sketchbooks first. We all need to calm down, according to Aidan Martin, senior designer at Alienation Digital. “Don’t start with a design: start with a scenario,” Aidan advises. “Establish the user’s goals, plan out their path, and then design around it.”
17. Make a Post-it note of your website.
Elliott Fienberg wonders if your design concept will fit on a Post-it note. “I like to write down my key content on a small piece of paper, like a Post-it note,” he explains. “This will assist you in determining what is truly vital and what may be left out. The little sheet of paper represents the average user’s attention span these days.”
18. Create a user flow diagram.
Do you have any ideas for what to do with the rest of the Post-its? Elliott Fienberg adds, “You may extend this activity by laying out your user flow on a series of Post-it notes.” “I can assure you that your project will be much more focused.” Other sticky notes, such as virtual Sticky Notes on Windows and Stickies on OS X, are available.
Workflow in Photoshop
19. Choose your layer names carefully.
When naming your Photoshop layers, be as detailed as possible.
Rhys Little gives a few pointers on how to share Photoshop layouts with your team. His first tip was as follows: “When naming your Photoshop layers, be as detailed as possible. When creating a new layer, it only takes a second to give it a simple name that people will recognize. Later on, this will save hours of forensic work.”
20. Dispose of any extra layers.
Rhys Little adds that any excess layers in Photoshop drawings should be discarded. “If you want to keep those extra layers ‘just in case,’ archive a version with the layers you want to keep,” he advises. Only the layers that developers and other designers require access to will be included in your main file, reducing confusion.
21. Make sure your folders are labeled.
“Make sure you create an ASSETS Folder that contains all of the fonts, photos, logos, and other assets utilized in your project,” Rhys Little explains. “Also, make sure those individual folders are labeled appropriately.”
22. Keep the names the same.
Instead of incrementally naming files, Rhys Little recommends sticking to a consistent naming policy, with the current site design file always having the same name. Older files should be moved to a separate archive folder.
Consider the following scenario:
23. Back up your data to the server
“Don’t forget to save your work to the server,” Rhys Little advises. Even if you’re just tweaking a file for an afternoon, “if you’re sharing files, you need to make sure that your most recent work is readily available even if you’re not.”
Keep your customers pleased.
24. Create moodboards on Pinterest.
Pinterest is an excellent place to start collaborating with your client on moodboards.
While we’re on the subject of keeping clients on your side, we all know how much they enjoy moodboards. They’re a terrific method to swiftly gather pieces and inform your client – or even get them engaged in the design process from the start. What’s the quickest way to get started? Make a Pinterest shared board for your client and allow them to pin away.
25. Involve customers from the beginning.
“Involve the client as early as possible in the design process,” Aidan Martin advises. “Remember that they know their business best, and you’ll only be able to design a genuinely successful digital solution if you combine their knowledge with your own.”
26. Make prototyping a priority
To get early versions of your designs in front of clients as soon as feasible, use prototyping tools. This might be as basic as a Fireworks prototype or as complicated as a working Balsamiq wireframe. “Get those signed off before getting into Photoshop,” advises Gavin Elliott, a freelance web designer.
Boost your career potential
27. Seek assistance.
When you’re stuck, use a free collaborative platform like Trello to ask for help.
If a job requires an advanced talent that you lack, don’t be hesitant to ask for assistance. You don’t even have to be in the same country using free collaboration platforms like Trello and Redbooth!
28. When you have free time, work on your portfolio.
“Don’t wait for other people to challenge you or ask you to attempt something new,” advises Ben Howdle, a developer at Wapple.net. “When you’re in between jobs and have done pitching, you should always be working on fresh portfolio pieces. The more creative you are, the better.”
29. Accept new challenges with open arms.
Another way to keep the business flowing, according to Ben Howdle, is to say yes to work that is outside of your comfort zone. “Taking on challenging jobs will help you develop and expand your talents far more than any lesson can. And deadlines are a great motivation for on-the-job learning.”
30. Get Dribbble’s feedback
Remember how beneficial those college crit sessions were? “Look for inspiration on sites like Dribbble,” Ben Howdle advises. It’s a designer-focused social network where you can publish your work in progress and receive feedback from your peers. Other designers can sometimes point you where you’re going wrong – or right.