Web design is a tricky business. To me, the most unexpected discovery about web design is that “design” is a minimal part of it. When you break down the process of seeing a website from start to finish, it’s only about 1/3 actual creative, conceptual work – searching for inspiration, creating mood boards, sketching and concepting, etc.

The other 2/3 is a designer’s gruntwork – applying a design concept to various instances of elements, creating redlined mockups for development, cutting image assets, creating specs for text, colors, etc. And then there’s development testing, going back and adjusting the design, and reimplementing.

To look at it this way, it seems pretty dismal. But it’s the satisfaction of that initial 1/3 – you know, that part where you got to be creative – that keeps us going and pushing toward creating new things. We really don’t learn, do we?

In an effort to keep as much of my time and energy in the creative part of the process as possible, I’ve been slowly building up a collection of tools and shortcuts to speed up the un-fun parts. There are a ton of great resources out there that other designers and developers have created to make life easier for the rest of us, and I try to take advantage of those whenever possible. So in turn, I’m sharing them with you.

Web Fonts

Typekit – high quality typefaces from established foundries, with a free basic plan
Font Squirrel – free fonts for web use or download
Google Web Fonts – totally free and building up a solid collection

Layout Calculators/Generators

960 Grid System – Photoshop action that automatically creates a 12 or 16-column grid
Grid Calculator – handy tool for calculating custom gutter, margin, and column widths
GuideGuide – extension that sets up guides in Photoshop based on the settings you want

CSS Generators

CSS3 Generator – input values for shadows, rounded corners, etc & generate CSS3 markup
CSS3 Button Generator – input color, shape, and other values & generate CSS3 markup
CSS Portal – a variety of online CSS3 generators
ColorZilla Gradient Generator – Photoshop-like CSS generator for gradients

UI elements

Premium Pixels – I use this mostly for browser chromes, media players, & device renderings
365psd – similar to above, with some good buttons and UI ideas
PSD Freebies – smaller resource, but with good base elements to work from
Subtle Patterns – great place to start if you’re looking for a subtle background texture

Icons

NounProject – the holy grail of standard, pictogram-type icons
iconmonstr – newer icon resource with lost of depth in icon variety
Symbolset – service that serves icons in the form of fonts to your website instead of images
Pictos – another icon font service, will also host your custom-built icons
Brands of the World – an encyclopedia of vector versions of established brands’ logos

Mobile Design

Density Converter – halfway through the post, there is a guide to sizing up for HD displays
LiveView – desktop app with companion iPhone app, lets you preview work live on a phone
Android Design Preview – desktop app that previews work on Android phones via USB

Photoshop Shortcuts

Photoshop CS5 Shortcuts – seriously, keyboard shortcuts cut my work in half – use them

I hope these prove helpful. If you know of any other great resources that I didn’t include, please share them in the comments section!

Before I became a part of Degas, I was living a reasonably relaxed life in California working as a freelance designer, painter and illustrator. That was eight months ago.

Now I’m a Washington resident helping run a startup business as the Art Director, UX designer, office manager and overall Director of Etc. Along with my fellow Degas teammates, I’m working countless hours every week to launch our product on time. This has definitely been a huge shift in my career. I’ve gone from painting in a garage studio to working at my laptop all day.

Not only have these been extreme changes to my lifestyle, they’ve caused shifts in my creativity and how I solve problems. I’ve noticed large and obvious differences between UX design and painting. However, I have noticed similarities between the two as well.

Both painting and UX design call for a certain attention to detail. Although they’re different mediums, they each have their respective problems that require solving. With UX, I need to think of the design in terms to how fluid I can make the user experience. Otherwise, the ease of using the app is compromised and there are a lot of files to back track on and fix. It can become a very prolonged process and there’s even math involved!

With painting, there can be a lot of happy accidents and looseness of strokes. It can be a freer and more therapeutic process, but if something isn’t quite looking the way I envisioned, I need to figure out why and how I can fix it. This leads to a lot of trial and error and can also be a prolonged and difficult process.

Even with the differences between the materials and creative forms, these two are similar in their formation. They both start out as an idea and lead to sketches. These sketches lead to mockups and notes. Then it’s on to the execution, different problem solving, confused staring, long nights and pulling out of hair. There are “AHA!” moments and moments of disappointment and starting over to improve.

Going from painting to UX design has been an exciting, frustrating and educational experience. It’s pretty different from what I was used to before, but it’s a valuable and rewarding craft that I’m happy to have added to my skillset.

Hanna wrote the following post on the similarities and differences of the design process in the class room versus Degas:

Last week, after working with the Degas team until midnight I commented about how much that day felt like “college.” By the time it got that late, everyone was making jokes, talking loudly, and acting a little goofy. When I finally climbed into bed, I felt tired yet satisfied. The feeling of that day felt like the late studio nights I was used to.

Since I’ve been at Degas, I haven’t been able to help but compare my experiences here to my college studio life. Our basic approach is pretty similar: we start with research and mood boards, create something, get critiques, and refine our creations.

Yet, there isn’t as much back and forth as I’m used to. Unlike college, there’s no one to hold my hand in each and every part of the design process. I have to make my own decisions.

Both of these experiences are incredibly valuable. It’s important to understand the concept of design and get a better understanding of why something looks good and how to create something. This basic design experience is important so I know what to do and why. Instead of creating something only because it’s pretty, the understanding helps make the idea more grounded and gives me an arsenal of tools I can use. I’m also able to have someone there to make sure I’m doing everything correctly.

On the other hand, at Degas Media I can learn from trial and error. I can stumble upon different techniques and different shortcuts (and remember them better). I can learn from other designers who I’m working alongside. This process of working on my own and attempting to create something that will actually have an impact at Degas (or another company) is hard to find in the classroom.

Image Source

Hanna wrote a great post for us about the value of design:

This spring, a survey popped up on my Paid Viewpoint feed. While taking it, I discovered it was a survey on the importance of design as well as my view on crowdsourcing sites. I took it saying “Yeah! Pay Designers a lot!” and completely forgot about it.

Last week, Mel tweeted the article, Design Is Now Crucial to Startup Success. It was about that very survey. In the survey, 99designs found that startups, small business owners, entrepreneurs and designers care about design and think it’s an important part of the success of a small business’ success. However, 65% of the people would only pay up to $500 for a new custom logo.

I realize that a small startup or businesses may not have very much money to spare and probably wants to put more resources into other parts of the business, but I think the disconnect between the perceived value of design and the willingness to pay for good work is alarming. A good customized logo is developed by long talks about branding, colours, products and services, with a good understanding about the client base and company in general. Sketched out, many revisions and versions are required to create something that will become the face of the company. All of this will take many hours. There’s also overhead, turnaround time, level of expertise, service and support, as well as many other factors that go into being a designer. $500 isn’t exactly that much.

Designs do cost money to make. Even though art may not be exactly tangible, it’s still a product. Not only that, but a customized product built from scratch. Perhaps we’re still in a transition period: our value for design is going up at such a rate that our wallets haven’t caught up yet. Or perhaps 99designs and Paid Viewpoint surveyed the wrong people. The people they asked might want to spend a lot of money on a customized design but can’t afford it at the moment.

Image Source

Hanna, our design intern, wrote a post about her decision to join Degas, coming to Seattle, and her experiences here so far. Check it out!

It’s been around a month since I started working for Degas Media as a graphic design intern and about three weeks since I came to Seattle. This month has been incredible.

I love Seattle and I love Degas Media. I wake up in a comfortable hotel room, ride the bus (and sometimes see Mt. Rainer when it’s sunny), hang out with fun/hip/creative people at the office, and eat delicious food (like Din Tai!).  On top of it all, I get to do actual design work alongside two talented designers and be exposed to the creative team at an amazing startup. I’m glad I chose Degas Media.

Before I finalized, I was a little indecisive. Should I go for a paid startup, a boutique design studio, Degas Media, or wait for other positions? Would I have enough money and resources to move to Seattle for three months?

Ultimately, Degas had the most to offer and coming out here from St. Louis has been completely worth the investment. Huge contributing factors to my decision were the wonderful designers. Before I accepted, I decided to stalk the work of the artists at Degas. I found Mel’s portfolio and Alyssa’s old portfolio (and Alyssa’s awesome iPad video). They have pretty amazing work. I thought I could learn a lot from the artists at Degas and receive advice, constructive criticism, and help.

Unlike other startups, who either have a freelance designer or no designer at all, Alyssa and Mel are completely integrated into the company. It shows how important art and good design are to Degas and how much they care about creating something that’s great quality and beautiful to look at.

I think the fact that it’s a startup is also attractive. The startup culture is incredibly interesting. It’s filled with people who are extremely dedicated to their work, even spending Memorial Day at the office. It’s also small and tight-knit, which has allowed me to gain a ton of experience and help out with actual work. From day one, I was thrown into the fray. In fact, my design will be within Degas Media’s app. This is both scary and exciting, and proves that I made the right choice in seizing this opportunity. I’m looking forward to the rest of the summer!

For the past few weeks, I’ve been finalizing our app’s UXD – user experience design. This means how our app looks and works – where various buttons and widgets are located, what happens after a user makes a selection, how action sequences work and so on. I need to thoroughly think through the app’s pages in order to make it a fluid experience for the user.

As part of the process to get these pages coded by our developers, I need to redline the design. Now, I wouldn’t say redlines are the current bane of my existence…actually, yes, yes I would. They’re now invading my dreams. However tedious and meticulous this is though, it’s a vital and very necessary step in getting our products developed efficiently. By redlining designs we’re dramatically maximizing our developer resources, turning two to four hours of a developer’s time into 30 minutes or less.

Redlines are basically a blue print or translation of our aesthetics for the developers to easily code. It’s my responsibility to make sure the structure, labeling, and placements of text and assets are clearly indicated. I start with the finished png of our design and then overlay it with bright red lines, text and arrows.

The task of basic redlining itself isn’t so bad. It’s the trial and error and the ever-evolving harder levels that haunt me. It’s also the many different rules that come with different platforms. What I redline for an iPad won’t be the same for web. The colors and text are displayed and formatted differently and I’ve found it’s very easy to mix them up and save them incorrectly. If a mistake or fix is to be made in one file, it will most certainly need to be corrected in fifteen other files. The continuous feeling of thinking I’ve accomplished a whole set of redlines only to find out that the pages need to be revised yet again can be really discouraging sometimes.

What I’ve learned and still am learning about redlines is that I need to have patience and a lot of it. Mistakes and revisions will be made and redlines will have to be done over and over again. The mistakes may be my fault or another’s, but I’m responsible for fixing them. The pages and our app aren’t going to get anywhere if I don’t continuously pick myself up and push forward through all of the frustration.

There is an upside to all of this redline madness though. Besides saving developer efforts, there’s the whole end result. Being able to see the app come alive and move with working buttons and actions is really rewarding. It’s a great reminder that all of this frustrating and hard work is producing something thought out and well designed. At the end of a long redlining day, I usually remind myself that I’m really excited and eager to see our finished app and that makes it all worth it.

Second sketch by Demetri Martin, author of “This Is A Book”