Web Designers on Mac: Top 20 FREE Alternatives to Paid Softies

Nov 23

Jigar PanchalFree Stuff, Mac OS X, Web Dev, Work No Comments

Professional web designers on the Mac platform rely on commercial heavy-hitters like Adobe Photoshop, Illustrator, Fireworks, and InDesign for their graphic design needs. And when it’s time to slice and dice, some depend on the excellent Dreamweaver CS4 for WYSIWYG design/development; while many Mac code jockeys swear only by editors like Coda, BBEdit or TextMate. Others prefer to mix, match or blend.

Designers also rely on various supporting apps to accomplish every day jobs like FTP uploading, cross-browser testing (important if you’re designing/developing on a Mac platform only), screen-shot snapping, pixel measuring, and the like.

While many of these programs are slick, they also of course cost … money. Which brings us to free apps for the Mac crowd. Which are the best compared to their commercial counterparts? Or are simply great apps in a league all their own? Put away that credit card for now and let’s find out!

Free Photoshop alternative

GIMP (Mac)
In a nutshell, GIMP provides designers with the power to accomplish almost any task that Adobe Photoshop is used for. Mac users familiar with typical Cocoa apps will find GIMP’s interface and menu system very “un-Mac” like (requiring the X Window System, commonly called X11), but if you soldier through you’ll find a powerful image editing program with all the fixins – advanced multi-layering, text and image effects, pro-level image manipulation, and a full range of design tools. High quality plug-ins are freely available to extend the app, including the ability to use some native Photoshop ones.

GIMP in 20 Free Mac Apps For Web Designers Toolkit

Also check out:

Seashore
Based on GIMP, Seashore is a pure cocoa app which makes it very OS X friendly. A range of tools for gradients, textures, layers, and drawing are found in Seashore. However, the program lacks many of GIMPs more powerful features so it’s not exactly a GIMP replacement either.

LiveQuartz
Sporting a sleek Mac interface, LiveQuartz describes itself as a “simple and powerful free photo editor for Leopard.” It does two thing very well: layers and filters. Basic drawing tools are also included but, as with Seashore, it’s not billed as a Photoshop replacement either. In the hands of the right designer, however, fairly sophisticated designs can be created with this nice app, which is also fun to use.

Free Illustrator alternative

InkScape (Mac)
The open-source InkScape, another Mac application that requires X11, is a viable alternative to Adobe Illustrator with its ability to create and edit graphics in scalable vector format.

AI users will feel at home using InkScape with options like layer control, gradients, connector path control/manipulation, various brushes (including calligraphy), type effects, masking, EPS exporting, a 3-D shape tool, object tweaking/sculpting, and even a diagram connector tool useful for a variety of purposes, like creating site maps. Depending on the complexity of your design, files can be exported from InkScape and into Illustrator and vice-versa.

Dotted-worldmap in 20 Free Mac Apps For Web Designers Toolkit More

Quality in Web Design: The ultimate purpose of Design!

Oct 11

Jigar PanchalDesign, Web Dev, Work, Yahoo Store , , No Comments

Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.

I’ve put together a few pointers, and collected some examples to explain just how I look for quality within a website design.

01. Spacing

One of the main things that I look for within a good website design is clever use of spacing with design elements. Paying close attention to how certain things are spaced out and lined up can really make a difference to the overall appearance and sense of quality of your design.

I think the key to getting your spacing right is to look at all of the elements within your design. Looking at the bigger picture really can help you get a good idea of how best to space your elements. Sometimes zooming out and taking a different look at your designs can be a great help.

Examples of Excellent Spacing

Great Spacing on the Good.is Website

As you can see here, there is a very clean and open feel to the content here. This is completely down to the designer allowing a good amount of space around the text & images.

s

A very well spaced out Digital Mash Website

Having well spaced out elements can make them a lot more attractive, and a lot more clickable. Digital Mash is a great example of a very welcoming website.

More

Tips to make an Ecommerce website Successful!

Mar 28

Jigar PanchalDesign, Web Dev, Yahoo Store No Comments

When was the last time you called customer support because you were having problems checking out online? Probably never! Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process. Sometimes, convincing your customers to trust you is your biggest challenge.

There is no “Consumer Trust for Dummies,” but as eCommerce designers, we need to focus on some fundamentals. The following topics may seem as obvious as walking into a seven-foot Wookie, but rest assured you will find plenty of websites with a mouth full of fur.

1. Paint Your Pictures At Home

Make the logo bigger

If your core demographic is women between the ages 35 and 65 who have an annual income of $60,000+, you would treat them different than the 18- to 25-year-old male demographic. First and foremost in e-tail: forcing your visitor to think is a bad idea. When creativity stops being subjective and can be measured by a dollar amount, making sure you’re designing for the customer is a no-brainer.

Years ago, I had an SVP of DotCom tell my team, “You can go home if you want to paint pictures.” And for the rest of the day, I couldn’t wait to get there so that I could make sure the next morning his inbox was full of expletive material illegal in most counties. After calming down, I realized he was right. All along, what he was telling us was simply to design for the customer and not ourselves. This was a challenge for designers working in an eCommerce corporate atmosphere but a very important lesson to learn.

2. Good UX Is Like A Perfect Movie Score

give the user an experience

Build brand loyalty to gain patient, forgiving customers for a lifetime. For instance, Apple’s customer loyalty exceeds all other brands with an unusual cult following. Apple lovers forgive the company when it makes mistakes and zealously defend the company’s products and reputation.

How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

Like the perfect score to a film, a good user experience is unobtrusive and transparent to the consumer because “it just works.” The Apple model will not work for everyone, but I often find myself challenged with a W.W.J.D. moment. Ask, “What would Jobs do?” and then look at other websites for inspiration.

3. eCommerce UX Pitfalls To Avoid

can't we all just get along

Just because a website is usable, does not mean customers will use it. Usability and user experience are in the same family, but more often than not user experience is the forgotten child. There are key areas in which the two must co-exist. Below are suggestions for some areas where websites should spend as much, if not more time, on the user experience.

Product Detail page

The product detail (PD) page is where some retail websites drop the ball. Too much focus is put on the design and usability of the home page, and that effort does not continue through to the rest of the website. More of the user’s time is spent on the product detail page than any other. Here, you need to offer customers all of the information they are looking for but present it in an intelligent way as well.

example of no-click zoom from endless.com

A few recent trends on eCommerce websites are “no-click” alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message.

don't forget to select a size

The Checkout Process

Much like the PD page, the checkout process is a critical piece that engages the customer on a somewhat intimate level. However, unlike the PD page, where customers want to spend time to make sure they want what they are looking at, the checkout process should have as few steps as possible. Too many steps and the customer feels trapped.

But too quick and they feel like they have lost control. For instance, asking for credit card information too soon will seem out of order and no doubt scare even the most seasoned online shopper into abandoning their cart. Hidden taxes and shipping costs will make them feel like you are trying to take advantage of them.

Security

Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. It does not take much effort to display a message telling your customers that they are safe in your hands; a footer link to your privacy policy is not always enough.

Page Weight

A page’s weight is determined by its file size, by adding up every image, every line of code and anything that gets loaded when the user first hits the page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash Shared Objects are often forgotten, but they all add to a page’s “weight.”

Some fascinating things are on the horizon for developers related to user experience and page weight. One notable development as of late was the release of Safari 4 Beta, which has support for HTML 5 media tags, CSS animation and CSS effects. As more and more of these features become standard in browsers across the board, we can look forward to offering users a better experience by using features directly in the browser. More

A Closer Look at Fennec, the Mobile Firefox Browser

Oct 21

Jigar PanchalNew Updates, Web Dev , No Comments

Mozilla’s Firefox-like browser for mobile phones, code-named Fennec, has been released as a free alpha preview for Windows, Mac, and Linux systems (and Nokia N810 Internet Tablets). As you would expect with an alpha preview, it’s a bit buggy, and not all the features are in place, but it’s intriguing to see how Mozilla plans to smoosh Firefox 3’s features onto the tiniest screens. If you want to know what Firefox on your phone might look like, read on for detailed screenshots and a rundown of Fennec’s features. More

Free CSS Layouts and Templates

Oct 05

Jigar PanchalDesign, Links, Web Dev, Work No Comments

As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.

You can start from there, learning and exploring the possibilities of CSS and modifying templates for your exquisite taste. Below you’ll find a list of resources which offer free, gorgeous and valid CSS-based templates – usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.

Usually developers require a link to the site where the template was downloaded from. So before using these templates it might be useful to take a look at the license agreement the developer provides. Links checked: June/19 2008.

(X)HTML- and CSS-Templates

Online Converters!

Oct 05

Jigar PanchalLinks, Web Dev No Comments

Online converters always come in handy. Once you need to perform some operation with your files, they can save your time achieving the same results online, without installing some specific software. In fact, there are many online tools, which convert formats, files and code snippets for free. Some of them are quite specific tools aimed for developers, but some are common “all-rounders”, which manage to convert almost every format to a more popular one. Using them, you can generate .pdf-documents out of images, images out of texts or RSS-feeds out of web-sites. You can also convert any audio- and video-files immediately – the results can be received via e-mail.

So what can you use? What should you use?

This overview of online-converters for users and developers might give you some useful starting points and improve your productivity. More

Online Generators (Web Developer’s Blessing!!!)

Oct 05

Jigar PanchalDesign, Links, Web Dev 2 Comments

One can discuss whether web-generators are useful or not. On the one hand, they don’t challenge our creativity, but on the other hand they make our life easier and save our precious time. However, it doesn’t matter really. What matters is that we use them if we have to solve some problem quickly and efficiently. We’ve taken a look at the most useful online-generators for web-development and listed them below. Links checked: May/10 2008 – screenshots added.

css generators

More

Web Design by Designers

Oct 01

Jigar PanchalDesign, Web Dev No Comments

In: Articles

By Kimberly Elam

Published on August 26, 2008

http://www.digital-web.com/articles/web_design_by_designers/

Designers are, as a rule, a fussy bunch, and when it comes to their own business communications they’re even more so. Designing a website for an award-winning design firm verges on the impossible. A design firm’s web presence primarily serves as a tool to attract new business from a global community—and, secondarily, as a means to show off. Designers are by far their own worst critics, and their websites have to tread a fine line between being cutting-edge so as to attract young new business, and more traditional so as to appeal to established or more conservative businesses.

First principals

An analysis of design firms’ websites can provide an education in a number of the best practices of visual organization for the web, and reveal the tenets of good content structure and typography.

Many of the most successful and well-known design firms are led by designers who cut their teeth on publication design. They understand the principles of good design and bring that understanding to their web presence. Although many firms will outsource the design of their site, it is guaranteed that the principals in the firm will actively art direct the project, and insist on good typography and design.

An analysis of design firms’ websites can provide an education in a number of the best practices of visual organization for the web, and reveal the tenets of good content structure and typography.

More than any other design principles, hierarchy and structure play key roles in design. Hierarchy is the ranking of text and image elements in order of importance. Hierarchical order enables the designer to position and emphasize the most important elements or features clearly and obviously, the second most important less obviously, and so on. Once content is organized and ordered via hierarchy, the next series of decisions involve the structure of information. In both print and web design the most commonly used structure is a grid. A grid is a system of vertical and horizontal divisions that organize and create relationships between elements. Grid system arrangements are usually formal and are intended to create visual order and efficiency in production. Grids are frequently used in publication design and web design as they guide information hierarchies and promote visual rhythm and consistency among multiple pages or screens.

MetaDesign

The first site we’ll look at is MetaDesign, a very large, highly respected and established firm with offices in Berlin and the US. Their name literally means “Design for Design”, and the firm lives up to the promise with an awesome list of clients. As one of the largest design firms in the world, one might be forgiven for expecting a splashy website with all the bells and whistles that can be produced with Flash. Nothing could be further from the truth.

Screenshot of MetaDesign.comRestraint and austere colors are hallmarks of MetaDesign.

The site is simple to the point of being austere. One of the most refreshing aspects of the site is the written content, which is distilled into a few sentences that address key topics. The writing is clear and shown at a large scale that invites engagement, even from the most rushed user. The clarity is outstanding and the nonverbal message is truthful sincerity.

Screenshot of MetaDesign.com 'What We Do' pageAll text is distilled into a few sentences for each topic.

All pages have a white background with black and gray text, with color reserved for images of the firm’s work. This serves to make the page crisp and by contrast the color images appear all the more lush. Generous white space surrounds all of the page elements giving each word, line, rule, or image a sense of intended placement and importance.

Screenshot of MetaDesign.com 'Client work' pageClient work thumbnails speak to the wide range of projects accomplished.

The selected work section of the site is just that—selected, not every project ever done by the firm, which would overwhelm the user with thousands of images. They have chosen thirty-one projects to showcase, and each has a single image described with just a few key words and a single sentence. This is highly restrained from a site that could have easily become too complex with multiple images of major projects. The broad range of clients is clear from the small thumbnail image and client name. Web projects, interior projects, identity projects, and packaging are all represented, and communicate the range of work accomplished.

Screenshot of MetaDesign.com showing vertical gridlinesThe site structure is a simple two column grid with the right column subdivided into thirds. All elements have alignment relationships along the column grid lines.

The structure of the site is as restrained as the use of color and imagery. It is a simple two-column grid in a proportion of roughly 2:1. The smaller right-hand column is subdivided into thirds for the client thumbnail images. All text and images align to the columns, creating a strong sense of order. Black horizontal rules at the top of the page emphasize the grid structure, and the standing categories of text at both the top and bottom of the page are separated from the images by thin gray rules. Every element has a position and intentional placement.

Many designers are successful in grid design when working with columns, but very few carry the grid to a higher level of refinement by working with the horizontal divisions of a grid. The MetaDesign grid is carefully crafted with alignment of text and image elements both vertically and horizontally. Rules align at the top and bottom of the page and frame the column structure. The top and bottom of the large images align with the top and bottom of the thumbnail images. The use of horizontal alignment underscores the intentional design of the site and creates an interrelated and harmonious composition. All elements have a purpose, and their placement is purposeful as well.

Screenshot of MetaDesign.com showing horizontal gridlinesAll elements of rules, text, and images have strong horizontal alignment. This alignment contributes to a sense of compositional cohesiveness of all elements.

The MetaDesign site is highly sophisticated and direct. The quality of their work is apparent in all aspects of the site design, from the succinct language to the tantalizing images. The user is never lost in the site and is constantly impressed with the range of clients and quality of work. Prospective clients can’t help but feel that their new project is in good hands with this firm.

Duffy & Partners

A web site that is very different and yet equally well versed in the principles of design, as well as the quality of work, is the site for Duffy & Partners.

Screenshot of Duffy.com homepageUsers are welcomed to the site with a lush range of portfolio thumbnails.

On visiting the site the viewer is not met with the predictable welcome page and list of choices—instead, Duffy & Partners cut to the chase and welcome the viewer with sixteen large thumbnails of beautiful portfolio work that selectively change. This system visually articulates the wide range of projects and clients. The effect is colorful and rich. Mouse over the thumbnails and the name of the client pops up inside a frame that highlights the thumbnail. Click on the thumbnail for a page that features a quote by the client and a paragraph on the project. The text information is as lush as the imagery. The credibility of the firm is underscored by the client quote in all caps, and the paragraph description speaks to the role that Duffy & Partners played in the project.

Screenshot of Duffy.com project detail pageImages and text are organized into four sections: 1. Name of client and thumbnails, 2. Client quote, 3. Quote attribution, 4. Descriptive text, and 5. Project components.

This is a lot of text information and could be overwhelming, but the system is so well designed that it works effectively. The page is divided horizontally into four sections. The top section contains the row of thumbnails and the name of the client. Just beneath the thumbnails, the client quote—in all caps with bold orange quote marks—can’t be missed; its importance is underscored by the orange accent color. Next is the name of the person being quoted and their title, lending credibility to the statement. A paragraph of text describes the project and is visually highlighted by a short lead in statement in bold caps. This description helps the user understand the range of the project and the role that Duffy & Partners played. Finally, a horizontal list of deliverables completes the page.

Screenshot of Duffy.com large product imageFull screen images invite the user to examine the quality of design.

When one of the thumbnails is clicked the effect is startling. The images scale from micro to macro, with a beautiful full-screen image that allows the user to see the quality of the work in great detail. It’s refreshing to see such large-scale complete images after being teased by the thumbnails.

A similar text system is employed for the categories of Our Mission, Brand Language, Leadership, and Capabilities. The system works very well to communicate the firm’s commitment to excellence. Again, the text is limited and a quote helps to engage the user.

Screenshot of Duffy.com video pageTwo video presentations enable users to hear from Joe Duffy and othets about the design process and give insight into how the firm works.

A capstone of the site are two videos that clearly explain the Duffy design process and provide insight into the principals and client reaction to the firm. The videos are short and answer a myriad of questions for potential clients. There’s an opportunity to see the studio, designers discussing work and preparing presentation boards, designers interacting with clients, and clients describing what working with Duffy was like and how rewarding the process has been. The professionalism of the office comes through loud and clear, as does the commitment to excellence.

Summary

For both MetaDesign and Duffy & Partners, there is a clear understanding that good design is good business and that the web site must synthesize the qualities that have made the firms successful. Their approaches are very different, yet each is highly successful. Both firms have carefully worked with text and typography to distill ideas down to their essence. The sites speak clearly about their approach to design in ways that engage the user, whether it be limiting each project to one image, leaving the user hungry for more, or showcasing work with a range of lush images that speak to quality and the client experience.

Why is almost half of Google in beta?

Sep 26

Jigar PanchalNew Updates, Web Dev , No Comments

According to the Merriam-Webster dictionary, a beta is “a nearly complete prototype of a product.” In other words, a not-yet-finished product.

Google is known for keeping their products in beta (much) longer than most other companies. But exactly how many of their products are in beta? When we here at Pingdom investigated this, it turned out that out of the 49 Google products we could find, 22 are in beta. That’s 45%!

Note that we didn’t include any Google Labs products since they can be considered to be a “playground” for future products. If we had included those, the percent of beta products would have been much higher (57%). More

Cool Design Repositories

Sep 23

Jigar PanchalLinks, Web Dev No Comments

Older Entries