Posts

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

Sidr jQuery Plugin

Navigation has always been one of the most important aspects of a website’s design. If you can’t move throughout the site, chances are you won’t use it. However, navigation is also one of the few site design aspects with no tried and true solution. What might be right for me, may not be right for you.

Of course, there are some pretty good criteria you can use to judge what type of navigation you need. A small site can get by with a simple drop-down menu or the basic “three line” toggle menu. Larger sites have a much trickier task. They can use “mega menus” for their desktop version, but they will need another option for the mobile site.

Thankfully, most menus aren’t created from the ground up, so you can experiment fairly easily. Paul Andrew from Speckyboy compiled 15 jQuery plugins for navigation. They’re even responsive. Once you’ve found the one that matches the needs of your site, you can customize it and make it truly feel like a part of your website.

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.