Experts Speak: Everyday Design Tools

Amberly Dressler — Thu, 04 Apr 2013 20:02:00 GMT

Occasionally, a design tool comes along that establishes its place as an essential, can't work without it solution for Web designers and developers.

The available design tool options are nearly limitless, but here are what the experts have open on their computer every day:

Michael Cornett, Owner of Shine Online Marketing

Photoshop CS6 - Designing the layout of a website first in Photoshop, then coding that PSD file into a WordPress theme or other template. This really let's you get creative and visualize your site before ever getting to the coding itself.

Illustrator CS6 - Working with vector images and creating graphics for sites.

Sublime Text - A text editor for the nitty-gritty of coding sites.

Filezilla - FTP program for uploading and downloading files for new and existing sites.

Firebug - A Firefox extension that allows you to inspect on-page elements of your site quickly, in order to make the necessary changes.

Roboform - When you are working with multiple sites, online programs, etc., Roboform makes remembering logins and passwords simple (by doing it for you with a simple click).

Catie Hayes, Director of Web Services at Advanced Digital Websites

PagePart - With the emergence of mobile, we are trying to shift clients to mobile websites. It is very tricky though. They have limited budgets and big ideas. We came across PagePart, a mobile website platform that helps build a mobile websites affordably while providing design flexibility within a range that keeps you ultimately within design limitations that provide the best possible user experience.

This website solution is unique because the company also provides all the sales and marketing tools to help me sell my services. From an URL, I can create a working mobile website within about 10 minutes using templates and pre-selected colors. I can then customize to my client needs. All this happens quick and easily. We serve more clients at higher margins. You can't beat that.

Jorge Aguayo, SEO Specialist at InTechCenter

Inkscape and the GIMP - For me, the main tools are Inkscape and the GIMP. The GIMP is great to tweak the look and optimize the images. The curves tool, specifically, lets me enhance the contrast to my linking. Besides these two, I am fond of using Yahoo's Smush It tool to optimize the image files even more for the Web, as it lightens up the image files without affecting their quality.

Mario Mirabella , Founder and Creative Director of MSM DesignZ, Inc.

Dreamweaver - Dreamweaver is an extremely powerful text editor and streamlines all of my files into one connected entity, which helps put organization and consistency in the forefront without extra effort on my part. From CSS and HTML to PHP and Javascript, Dreamweaver's tools make developing websites simpler and more efficient.

Photoshop - Photoshop is my other go-to when designing a website or creating images for backgrounds/content/slideshows/etc. It's extremely powerful, the tools are intuitive and precise. It's ability to save for Web takes the hassle out maintaining quality of the clear and vibrant images I work so hard to create.

Zurb Foundation - I also use Zurb Foundation, a framework that makes creating responsive websites as simple as possible. With its pre-coded column grid, its excellent cross browser capabilities, and its beautiful jquery plugins, my speed of production has increased dramatically. It's an extremely important part of my process.

Prasant Varghese, Usability Analyst (Web Design) at Icreon Tech

960 Grid - To aid us in creating the most usable websites possible - we use CSS frameworks like 960 Grid that allow us to create website blueprints to help aid site visitors in naturally navigating through a website organically and without much friction.

The Web today is all about usability. Today - there is no such thing as a unique website - and so, websites with similar functionality are usually only distinguished by how usable they are.

Garrett Scafani, Creative Director at Yeti

Standard Issue - Personally I think my toolset is pretty standard issue: A laptop, adobe creative suite, a code editor, a camera and a sketchbook. When trying to improve the visual design of the project I try to get out of the routine and absorb as much inspiration from things outside of the Web realm as possible while still keeping up to speed with the current trends and standards. There are a lot of really clean and slick web pages out in the wild right now, but so many of them look exactly the same. It seems while designers are embracing new standards and tools (e.g the mobile-first approach and frameworks such as Twitter Bootstrap and Zurb Foundation) they succeeded in creating an experience that can adapt to any device but have in turn sacrificed making something the is different from every other responsive website.

To combat this I try to glean styles and visual motifs from everything I'm exposed to, whether it's an old book, a movie or video game, architecture, nature - anything. Mobile technology makes it really easy to capture these moments and take notes, just adding a phone and a bicycle to my toolset gets me away from the desk and helps me think about the project in a new and creative way.

Deanne Hollis, CEO of Main Street Public Relations

Photoshop, PowerPoint and Stock Images - As a Website developer, time spent on graphic design is critical because it can become very time consuming lowering the profit potential of the business. I develop a vision for a site then find the fastest most efficient way to bring it to life visually. The top tools I most frequently use are Photoshop, MS PowerPoint and a stock-image supply site.

Photoshop makes it easy to size and crop images then add text (example logo header: www.theinnerniche.com). PowerPoint enables a quick and easy screenshot capture then crop and save for posts, where maximum image clarity isn't an issue. The stock-image supply sites are a very inexpensive way to get great images and ensure your client is protected from copyright issues. The logo-header of the sample site previously referenced was created using a stock image, stock vector image and Photoshop.

Ryan Morgan, Online Marketing Manager at ERC

Zurb - For starting from scratch, I always use paper and pencil along with Zurb sketch sheets, which are great for mapping out designs, especially responsive designs.

Sublime Text 2, Crunch SimpLESS - For coding, I've been using Sublime Text 2, which in my opinion is the best text editor out there. I also use Crunch and SimpLESS for LESS CSS coding.

Toggl - If I'm doing freelance work, Toggl is a really great free time tracking application.

Bootstrap and Base - All of my designs are responsive these days, and two great frameworks to start with are Bootstrap from Twitter or Base for a lightweight framework.

CSS Tool: SiteAssist Pro Enhancements

Pete Prestipino — Fri, 05 Sep 2008 16:15:00 GMT

CSS isn't going away anytime soon - in fact it will probably get a lot more prominent and better with the next standards release. But if you are a web designer and haven't gotten onto the CSS bandwagon, now is the time.

WebAssist recently unveiled its latest version of SiteAssist Professional, a tool that enables website designers and developers to build CSS sites with navigation quickly. Website Magazine has covered SiteAssist in the past and we've always been impressed with its broad scope of features for those using DreamWeaver. So what's new in this version? For the first time, users can create and custome pages to include Spry or other Javascript framework components.

“CSS is, undeniably, one of the most efficient and flexible ways to build sites today, but it isn’t without its limitations,” said Hieu Bui, President, WebAssist. “SiteAssist Professional seeks to help developers, both professional and beginner alike, harness the power of CSS easily and utilize their resources more effectively with customization of templates and easy navigation options.”

SiteAssist Professional is compatible with Dreamweaver CS3 and Dreamweaver 8 on both Windows and Macintosh platforms. SiteAssist Professional retails for $199.99, but is available for $149.99 as a special introductory price until September 9, 2008 directly from WebAssist.

CSS Menu Writer For Dreamweaver

Pete Prestipino — Wed, 14 May 2008 14:40:00 GMT

WebAssist announced this morning the availability of CSS Menu Writer, a pretty handy little Dreamweaver Extension that enables web professionals to create fully customizable cross-browser, CSS-based navigation menus compliant with web standards.

One of the biggest challenges for modern web professionals today is the creation of CSS-based (now the de-factor design option), standards-compliant navigation menus. With WebAssist's new CSS Menu Writer, developers have a solid solution available to generate customized, standards-based menus quickly and easily across browsers directly within Dreamweaver.

While CSS Menu Writer is powerful on its own, when used in conjunction with Eric Meyer's CSS Sculptor, released last summer for creating standards compliant CSS-based layout, the power of CSS for creating custom web pages with stellar navigation has never been easier. CSS Menu Writer is available now, with a list price of $99.99 and an introductory price of $74.99 through May 27, 2008. For more information about CSS Menu Writer, visit: www.webassist.com/go/menu/.

PDF Solution for Dreamweaver Users

Pete Prestipino — Tue, 22 Apr 2008 14:50:00 GMT

Webassist announced the release of SiteScribe today, a solution that enables DreamWeaver users to create a PDF document of any website. The extension should make creating print-quality versions of sites and their disturnution easier and allow for a more seamless review cycle as users can insert comments.

Features include the printing of entire linked domains, the ability to manually select page options, flip between various screenshot sizes, remove or insert images from PDF and include metadata just to name a few.

The initial release of SiteScribe is for Windows Vista, Windows XP SP2, or Windows Server 2003, and requires Java 1.4 or higher. SiteScribe supports Adobe Dreamweaver CS3 and Dreamweaver 8.

'Net Features : dreamweaver