Archive | Design RSS feed for this section

Web Design Toolkit: The Heavy Lifters

Web Design Toolkit

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!

Diving Into A New Creative Path

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.

Form & Function: Inspiration from Gaudí

Apps, like many things in life, need to be a combination of form and function. The architect Antoni Gaudí was well-known for blending function into his art and I think many developers can look to him for inspiration.

I was fortunate enough to see his masterpieces while visiting Barcelona. I remember looking at the beauty he put into the Casa Batlló, a house he restored for a family. This house is so vibrant and unique that you’d think you were looking at something that was purely done for aesthetics. We often interpret the verb design as pure aesthetics even though by definition design includes function.

Had I not had a self-guided audio tour in my ear, I wouldn’t have known that there was a logical reason why the windows near the top of the building were smaller. Because the windows are part of a tall atrium, with sunlight shining in from the very top, windows closest to the light were smaller than those at the bottom. The tiles surrounding the windows are darker and gradually get lighter as you continue downward. I feel as though our team is mirroring Gaudí’s method in the creation of our app.

Like Gaudí’s windows, everything in our app will have a purpose in addition to looking beautiful. He teaches us that you don’t have to sacrifice one for the sake of the other. As a developer of our app, I will be taking the beauty created by our design team and adding the function. When you tap a button and something happens, it will be because of my code. You’re welcome.

Image Source

My Type A Personality, and Other Findings

 

It’s been fun and surprising to see how my expectations of working at Degas have measured up to reality. The most surprising to me is how varied my job is. I’m sure if you’re a manager, or if you’ve been part of a startup, you’re probably laughing at me right now. I imagined going into this position would mean design work day in and day out – like I’ve been used to in previous jobs – but as it stands now, I probably spend only 2/3 of my time doing anything creative.

I looked up the definition of Director, and found this:

di·rec·tor/diˈrektər/

Noun:

  1. A person who is in charge of an activity, department, or organization.
  2. A member of the board of people that manages a business.

The surprising aspect of my responsibilities as Director of Graphic Design is that it means not just creating and deciding what the design work we do looks like – I’m responsible for creating the entire process of how we design it, from start to finish. This means creating schedules, overseeing other designers, working closely with developers, and lots and lots of Google Docs. My work is not only to create a face for our product, but to design an entire infrastructure behind it that will allow it to grow and evolve in the future. So for now, it’s hard and a bit frustrating to spend so much time without doing creative work; but at the same time, it’s exciting to see an actual structure slowly coming into place that we’ll be building off of for years to come.

On the other hand, I’ve been able to utilize skills that aren’t typically in the job description of a graphic designer. I’ve done copywriting for our product marketing and (obviously) our blog, which I’ve really come to enjoy. I regularly satisfy my Type A personality in the form of many, many spreadsheets. I get to be a part of big decisions about product features and marketing.

All this is to say that being in a startup is much more than a job description could possibly entail. Being an integral player in a startup means that your day-to-day job is anything but ordinary. Maybe some day, a few years from now, my daily schedule will be somewhat “predictable,” but for now the key to survival is adaptability.

Image Source

Design in the Classroom vs Degas

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

Starting Up

Light Bulb

Being part of a startup is a pretty unique experience. It’s fun, often challenging (see Alyssa’s post for more on that topic), and always interesting. I’ve been involved in startups almost as long as I’ve been in the field, and I can’t see myself going any other way.

When I was in school, I had the opportunity to tour several design firms in Seattle and San Francisco with my design class. At one firm in particular, we were told that there were teams that would work on a client’s logo alone for, say, 6 months – before even moving onto other basic branding components like business cards. There was one team in particular at this company who had worked on a branding refresh for potato chip packaging for 3 years. Three. Years. That’s a long time to be contemplating potato chips.

Now, I’m not here to knock the idea of a traditional design firm or agency. I think there is a ton of innovation happening in agencies, and there is a lot to be said for the creative mentorship and the thorough exploration of design philosophy and conceptualization that happens in these places.

The main difference, though, is whereas design agencies most often work with several different clients, give them a good branding system and then send them off into the wild, as part of a startup I am an integral player in the creation and evolution of a product.

These days, many startups are in the tech field – which means that there are tons of companies out there creating new kinds of technology that could potentially impact people’s lives. In Dieter Rams’ 10 Principles for Good Design, the first two principles are (1) good design is innovative, and (2) good design is useful. In my opinion, innovation and usefulness are the two most prominent things driving a startup. And if I can be a part of something that includes those things, then that’s something I can really feel good about.

Image Source

The Value of Design

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

Have You Hugged Your Developer Today?

You are the CSS to My HTML

The relationship between a designer and a developer is delicate. Rather than resembling peanut butter and jelly or salt and pepper, designers and developers are often more comparable to oil and vinegar – they just don’t mix well. Designers are overly sensitive and idealistic, while developers are logical and more closely rooted in realism.

We have our strengths and eccentricities, but it’s important to realize we’d both have a pretty hard time getting along without the other. The fields of design and development are just too vast for one person to be equally capable in each. Plus, our brains would probably explode.

So how do we smooth out the wrinkles in our troubled relationship?

To start, I’m going to hassle my fellow designers on an oft-repeated point: know your code! I can’t stress how important it is for web designers to know HTML/CSS. Now, I know I just said it’s impossible (or at least highly unlikely) for anyone to be equally capable in design and development, so don’t shoot me down just yet. Would you want an architect to design a building without having ever taken an engineering course? Then how do you expect to design a website without understanding the capabilities and restrictions of building it? Even if you won’t be the one ultimately building out the website, you still need to know the rules.

Point number two: keep up with technology. I’m not just talking about owning a late-model smartphone, using CS6, and bragging about your SSD. What I’m talking about is web plugins, responsive design, and what’s up the sleeves of the people leading the industry. The incredible advancements that have been made in web typography in just the past 3 years are a testament to the importance of designers staying in the know.

Lastly, the easier you make your developer’s job, the easier he or she will make yours. Alyssa wrote last week about the trials and tribulations of redlines. Redlines, despite their tediousness and ability to inspire fits of profanity, make a developer’s job 10x easier AND make it 10x more likely that the final result will be just as the designer intended. They create a very clear accountability system, where both parties can be sure they are giving each other the right stuff.

Hanna’s Thoughts on Seattle, Startups, and Joining Degas

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!

Seeing Red… Lines

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”