Posts

Design Kit Screenshot

In general, web designers seem to like tools and resources that speed up their work and ease some headaches. This is most notable by the sheer number of them available. Nearly every design blog or website offers some unique design kit or has a recent blog post sharing the best recent kits.

You might be asking what a design kit is, but these kits aren’t uniform. They come in all shapes and sizes, varying wildly in scope and cost. They also range in quality from ‘incredibly useful’ to ‘waste of harddrive space.’ The best definition for a design kit is any prepackaged tool or piece of software which aids in the creation of a digital design project.

Some design kits come with interface packs, buttons, and graphics all intended to be used together. They may come with a specific color and font palette, but they are almost always customizable. Some kits are niche designs aimed at solving a specific problem, while others are catch-all assortment or full design templates.

The thing is, while these design kits can definitely help a designer in a time-crunch, they have their fair share of drawbacks, as Carrie Cousins discussed in her recent article for Design Shack.

  • Costs – One of the biggest issues with these kits is they don’t always come cheap. There are some great free kits available, but you should expect to pay for kits filled with premium features. For some budgets, this alone can rule out using a specific design kit. Thankfully most kits are relatively cheap for single license use.
  • Too Similar – Some kits begin to look bland because all of the parts are designed to be used together, but without a full finished design in mind. This can result in kits with 50 nearly identical buttons in an assortment of colors. It is up to the designer to choose parts that will look interesting together, but it can be tiring trying to sort out a repetitive and boring kit.
  • Incomplete Kit – Be careful to read all of the details for any kit before you buy so you know what you’re getting. A 1,000 piece kit may seem really useful and interesting until you discover it is largely made or elements you can’t really use. Many kits are themed and only contain certain types of icons such as social media buttons or calendar icons. Don’t spend money on something that doesn’t offer what you need.
  • Looks Too Much Like Another Site – Obviously the biggest problem with using pre-made tools and elements is eventually you’re site will look astonishingly like someone else’s who also used the tool. Many designers aspire to work solely from scratch specifically to avoid this problem, but you don’t have to completely swear off design kits to be original. Use the kit as a starting point. If you use all the elements and layouts as they came, you’re much more likely to look like any other site. If you spend the time to give these elements your own personal touch, you’ll look equally unique.

iOS 7 IconAs Apple announced last Tuesday, iOS 7 will be here September 18, and everyone with an iPhone or iPad will be seeing drastic aesthetic changes to their device. The redesign also inspired quite a bit of controversy and argument, but at this point there is little use fighting the new “almost flat” design requirements for apps and the Apple interface. The new iOS will be here in a few days, and designers have to either get on board or get left behind.

With a new iOS comes a complete redesign of most apps as well. Apple has already released guidelines for users to update their apps, and many have already shown drastic changes. But, many designers are still trying to figure out how to adapt their old app to the new style and interface requirements. But, there are many tools to help you along with the redesign. Alvaris Falcon compiled 10 of the best high quality tools and UI kits that will speed up the whole process. Best of all, all of the tools listed are free.

Many of these tools are designed to help you with the entire process all at once. The iPhone GUI from Teehan+Lax, for example, included everything you could need to update an app for the latest version of iOS. Others are more specialized. There is Home Screen, which offers an editable iPhone mockup, complete with home screen designs and icons. The App Icons Template similarly offers a simple template which aims to ensure your new icon looks great and fits all the requirements.

There are plenty of other options at your fingertips and it is up to you to choose the best tools for the way you design. Some will want to rely heavily on complete toolkits, while other designers are only looking for templates and inspiration for their creative jumping off point. Either way, if you choose any of the resources listed by Falcon, you’ll know you’re using a quality tool.

iPhone GUI

Endless CodeIt is a little ironic that most web designers hate coding. We’re all familiar with it, and we’ve all spent sleepless night chugging coffee and endlessly editing code until we feel like we’ve lost touch with reality. But, the best coders realized the entire process can be simplified and sped up with all the free tools available online.

Web Design Ledger created a “cheat sheet” of tools and resources designers can use to cut through the fog of coding. You’ll never be able to completely escape coding, but you can at least make it as painless as possible.

Code Editors

One of the main tools any designer should already have is a code editor such as Sublime Text 2. Back in the dark days of coding, many designers were forced to create Notepad files that seemed to endlessly drag on as they were filled with line upon line of code, but no one should know that pain in these days. Code editors can help you quickly jump between the tags you want to work on, and best of all, they highlight problems in your code as you write. To anyone who has ever searched for hours trying to find the proverbial needle in the haystack, that alone is reason to find a new editor to use.

CSS Pre-Processors

CSS is notorious for spiraling into obscenely long and confusing script that becomes eventually unworkable. Sass (Syntactically Awesome Style Sheets) is a meta-language that can be put on top of the original CSS to clean up all that messy code and make it workable and lightweight again. If you combine Sass with Compass, an open-source CSS authoring framework, you can easily create responsive designs with cross-browser friendly scripts to keep everything simple.

Code for Humans

We all have to deal with our own code, but writing for yourself or entirely for machines can leave the code hard to understand when you come back to it later. If you get caught up using entirely your own coding style, colleagues may not be able to make sense of it all, but if you write exactly as computers read it, your code can become difficult to update and read. Instead, write in a way that will keep everything easy to find and understand, with small file names and consistent organization. You can use Codekit (Mac) or Mixture (Mac/Windows) to convert it all into computer-friendly language later.

Use GoMockingbird

Wireframing is one of the first steps designers go through when constructing a site and creates the entire foundation you will build the site upon. These foundations are also used to present site designs to clients, so using sketches and doodles is a bit too unprofessional of an option. Instead, GoMockingbird creates professional looking wireframes that can portray even the more tricky elements of a page to everyone who needs to approve the design. You can include widgets, sliders, check boxes, and even social buttons, so that clients get a clear and complete understanding of how their site will end up.

Conclusion

There are tons of other tools included in Nicola Allen’s cheat sheet over at WDL. The ones I highlighted here can make the biggest effect on the time spent slaving over code, but every shortcut helps. There are tools and resources for every design task, including creating Lorem Ipsum dummy text so that you don’t have to. If you want to design, but hate the long nights associated with coding, you’ll appreciate everything the cheat sheet offers.

Tools, templates, plug-ins, and script libraries are all a huge part of web design. If we create absolutely everything from scratch, we often end up spending way more time than necessary to get the same results. We keep complete creative control, while streamlining our process to keep our work fast enough to keep clients happy and stay competitive.

So many tools come out every month, that some websites run weekly round-ups of all the new fancy toys we can use to make beautiful websites without draining all of our time and energy on individual products, but this also means many great tools get lost in the mix, or downloaded to be used once and forgotten.

To keep you from wading through duds, out-dated tools, and countless versions of tools that achieve essentially the same thing, Speckyboy collected 50 of the best resources and tools that have been released over the past year. Time is priceless to designers and all of these tools strive to make sure every minute you spend designing counts.