Groupon is one of the hottest internet companies on the web today and this is due to the fact they are a steward to their brand. We feel the foundation of a great company is brand design. The way you communicate each element of your brand through design determines the initial impression and lasting memory you leave with a customer.

Here are some tips:

1. The brand initially starts with the name. Try not to use “Deal of the Day” or “Daily Deal”. Deal in the title is OK, but keep it short and simple.
2. Try to have a mascot or at least an icon that people can associate your brand with.
3. Keep the design simple. You don’t want to distract from the purpose of selling the deal.
4. Make sure the deal title, main image, and buy button are the 3 most prominent focal points.

Here are some sites we found that we weren’t too fond of:

The next two are from the site Media Web Connect. They have created their software on a template system and the design customization capabilities are minimal. Also its hard to see the buy button on the sites and there doesn’t seem to be any guidance with design standards and color choice.

The following two are from the site Tippr. Tippr runs their own daily deal site and is licensing their platform out to 3rd parties. We like their site, but their 3rd party sites seem to be the same template and brand. Usability is clear, but the design is pretty plain.

Here are some sites our clients designed on our platform that we love:

IDineDeals.com is from the Rewards Network. They implemented a very clean design with a clear focus on the offer each day.

Another one of our clients Morgan’s Deals implemented their brand with a great sense of style leaning towards the female demographic.

The design is clean and the messaging is clear. These are the key elements to a good e-commerce and daily deal site.

Another one of our favorites is by DiscoverSD here in San Diego. They call their program the Hookup and have an excellent sense of brand. Their program is a weekly deal and each week they feature the coming weeks deal upfront. This builds the momentum and ensures a strong day of sales each week.

The making of the Artistic Hub logo.

1) The Design Brief

We met with Jimmy and Pat to decide what our main goals were for this new identity. We have learned from experience that is is very important to include the necessary people in this meeting (the first time) and allow some time to chat. Taking time to discuss the identity of the company, the goals, the clients, the work and the design ideas are all necessary to ensure that we have a clear direction.

What is Artistic Hub?
Artistic Hub focuses on on-demand merchandising and virtual design. We create interactive campaigns to engage our client’s fan base by coupling our custom built design competition application with the market leader in on-demand printing.  This technology creates engagement, validates new product potential, creates measurable return on investment, and most importantly turns the expense of design into a revenue stream.

Who are the clients?
Bands, Brands, Major Corporations and Interactive Agencies.

How would you describe Artistic Hub?
fresh, innovative, approachable, fun, interactive, helpful, global, supportive, community, smart

Main goals for the Artistic Hub logo:
*Must represent a hub – we want people to get it
*Easily recognizable
*scalable (standard for all logo design, but an important aspect here)

2) Research

Michelle and I spent time with some books and Google to get a better understanding of what a “hub” is and how it is expressed in other logos.

What is a hub?
dictionary.com says: 1. a center around which other things revolve or from which they radiate; a focus of activity, authority, commerce, transportation, etc. 2. the central part of a wheel, as that part into which the spokes are inserted.

3) Sketching

It is important to put pen/pencil to paper to shoot those ideas out of your hand. I’m a strong believer that the ideas don’t come out the same when transferred directly to a mouse. Don’t be afraid to sketch EVERYTHING. Michelle and I both sketched until we had at least 60 ideas each. It’s good to try everything so you know you have exhausted all of your ideas and you are choosing the right one in the end.

4) To the computer!

We scanned in our favorite logos to trace in Adobe Illustrator. (We don’t have wacoms in the office yet… hint hint )

Adding Text:

Adding color:

5) The Final Logo

We chose this shape because it represented a hub and the negative space shows a group of heads coming together. Unity and global expansion are represented here and the green color has that light, fresh feel. Jimmy and Pat were very pleased with this logo design and we went from concept to live website in 3 weeks. See how this logo is used in our company identity: (web, promotional materials, business cards and logo versions)

Check out ArtisticHub.com for more info.

Other GREAT blogs about Logo Design:

What Makes a good logo design?

6 Reasons Why a Logo Should Cost More than your lunch

My Logo Design Process – David Airey

or hey – just go to 81 of the best logo design resources

Good Source for Logo Inspiration:

Logo Lounge

Logo Design Love

Logo Sauce

Logo Faves

-Mel & Michelle

Best of 2008: A List of Design Lists – design:related

Best of CSS Design – Web Designer Wall

25 Fantastic Design Articles from 2008 – David Airey

10 Most Popular Web Videos of 2008 – Silicon Alley Insider

The Top 10 of Everything in 2008 – TIME

Magic Lighting Effects

Photoshop Explosion Effect

The O Series

Creating a Stunning Digital Smoke Effect

Advanced Glow Effects

Lines Tutorial

Hightech Swirling Aurora

Amazing Photoshop Light Effect

Creating Energy Spheres

Space Lighting Effects

Luminescent Lines

Dusky Lighting Effect

There are a lot of designers that use these effects but I stumbled on a few today. Very Impressive!

See the portfolio of Craig Shields

See the portfolio of Chuck Anderson

-Mel

What is a halftone?

According to Ryan from Vectips, halftones simulate continuous tones with equally spaced dots of varying size. The eye blends these tiny dots into smooth tones. So anything that has a continuous tone can be simulated by a halftone.

Getting started

1. Create a shape with a gradient, blend or gradient mesh.

2. Go to Effects>Pixelate>Color Halftone. Change the Max Radius to 20 and keep the rest of the settings the same. If the dots in the halftones are too small or too big change the Max Radius by double clicking the Color Halftone effect in the Appearance Panel.

3. Expand the image. Object>Expand Appearance. With the image selected, the Control Panel defaults to the Live Trace option (very cool thing I never knew about). Click the Arrow Button beside the Live Trace button and select Tracing Options.

Mode: Color (select if your object contains color, hopefully you are using black and white)

Max Colors: Dependent on how many colors you used, if any.

Path Fitting: 1 px

Minimum Area: 1px

Corner Angle: 1

Ignore White: Check this box.

I saved these settings as a preset in the Tracing Options so I can easily go back and repeat the previous steps.

4. Expand. Press the Expand button on the Control Panel and now your image is vector.

Halftone from Photos

I knew how to apply a halftone to a photo in Photoshop but I never knew you could apply a halftone in Illustrator! This is great.

1. Place and Embed your image in Illustrator.

2. Click Edit>Edit Colors>Convert to Grayscale.

3. Apply the same settings as before (if you don’t like the size of your dots you can change the Max Radius)

4. Change colors accordingly.

I think I prefer doing my halftones in photoshop (you have a little more control of the dot size and contrast, but it’s great to know I can create them in both programs)

Halftone Swatches

There are some stock halftone options in illustrator. They’re not as versitile as the techniques above but are worth checking out.  To open the swatches, click on the pop-up menu in the Swatch Panel. Then go to Open Swatch Library>Patterns>Basic Graphics>Basic Graphics Dots. The last 5 swatches are the halftone swatches. To read the full article read here.

The Healing Brush lets you correct imperfections in your picture in a similar way to the Clone Stamp Tool. Like the Clone Stamp Tool, you paint with sampled pixels from your image which you can switch the ‘Alt’ button. The Healing Brush Tool does an excellent job of matching together all of the relevant shades and textures, which results in a seamless finish. Read more about the spot healing brush here.

I found another good post on a photoshop blog that gives step by step instructions to fix wrinkles, bags under the eyes and skin tone with the patch and healing brush tool. For their step by step instructions click here. Below is my version of following this tutorial.

1. Select an image that needs enhancement.

2.First take the red eye out with the red eye tool that lives in the same tool bar as the healing and patch tool.

Select the Healing Brush tool (the little bandaid) in your side tool bar. Adjust the brush size to suit the area you will work on. Pick a sampling point by clicking Alt+click the area you want to use as a source and then click and drag the brush over the part you want ‘healed’. First I’m going to start with the lines in the forehead. You can always ctrl+z and retry for desired effects.

Make sure you create a snapshot of your work at this state. (This is something I never knew you could do in photoshop and a really helpful step). To create a snapshot go into the History palette and click on the icon to the left of the “trash can.”

3. Lets fix those bags! The Patch Tool is my weapon of choice. To get rid of dark puffy areas below the eyes use the patch tool to draw a selection. Then drag the selection to another similar part of the face to replace colors and tones and release the mouse button. Repeat step 3 for the other eye.

4. Keep it real. After everything is blended the face can look kind of fake (and alien-like!). To make it more natural use the History Brush tool to paint some of the old details below the eyes. This is why we created a snapshot in Step 2. Now create another snapshot.

5. Select the History Brush tool. Then go to the History palette and check the box to the left of your first snapshot. Select the appropriate brush. (you may want to lower the opacity to make it look more natural when you back back in some details). Now start painting back some of the detail and waa-lah, you are now a professional with the Healing and Patch tools.

Thanks Tai for turning me on to the healing and patch tools. They are super easy to use and give quick results.

STEP 01: Research

The themes of this movie include heartbreak, recovery and surrealism. The director described the film with certain words and I spent hours on the internet finding imagery that depicted her themes. Forest, creepy, eerie, curious, surreal, heartbreak, revival, interaction, engaging, dark, intriguing.

GREAT blog posts about Movie Poster Inspiration: Design Fix / Smashing Magazine / Inspirdology / Well Medicated (posters from poland) / Design Feedr / Smashing Magazine : Asian movie posters

Random Articles: How to Mend your broken heart / Recovery from a broken heart

Images: Here are some sample images – I saved a bunch in an “inspiration” folder for reference.

STEP 02: SKETCH

I don’t have my sketches handy, but I believe that all designers MUST spend time with a pencil and paper doing thumbnail sketches of their ideas before they go to a computer!

STEP 03: DRAW IMG

I wanted the poster to have an artistic, hand-drawn vibe and because I don’t have a wacom pad yet I have to do it the old fashion way. I think it’s more fun anyway! I draw on art vellum (transparency paper) so I can do many different versions and lay them over each other to decide how I want the final image to look. I did one version in outline only, and then I did a version with texture.

STEP 04: We go to the computer

I scanned my line drawings into the computer.

PHOTOSHOP: select > color range > choose white

This separated the black img out, but it still had a slight white border. You can continue selecting pixels to get ONLY the black, but I prefer to take it into AI.

ILLUSTRATOR: Bring in the PSD file and click object > live trace

You can play with the options to get a clean vector img. I love vector images and Illustrator files.

STEP 05: Color and Texture

I created a new layer in Photoshop and added some red behind the hearts and some brown behind the trees. I also found a great underground texture from CGTextures.com. This is a great source for free high-res images. I also found these great texture brush downloads from Brusheezy.com to add some texture. I created different layers with different opacity to give it that rough, texture on the edges.

Download these brushes: urban decay / cracks / oil stains

STEP 06: Version 2: New Texture and highlight

After creating version 1, I decided to step back & go more dramatic. I added some texture for the hillside, taken from an actual photo of the forest. Then I drew a ground line and scanned it in. I also made more grunge layers in black. I finished it off with a radial gradient the came over the hill, but behind the trees to add the the mystery. Simple shadows on the ground add depth to the image.

STEP 07: TEXT

We all know that fonts play a large part in the emotion and mood that the poster conveys. I spent some time on dafont.com downloading some sweet new fonts. I didn’t want to over-design, so I spent time with the basic helvetica, futura and garamond as well. These are are some of my favorites. Ultimately it’s up to the client.

STEP 08: POSTER COMPLETE!

Our final image turned out like this and Diliana was very happy with the outcome!

Now I have to create a flyer, poster with more info and website that incorporate this art. I also have to think about the difference in screen and printing colors. At home this poster is fairly dark, but on my screen at work it’s almost all black. Plus, different printers have different inks and if I print this with a company like CalCopy, I need to make sure I like the way they print out! (Not too dark) I’ll keep you updated on all of the promotional material. If you have any other questions about any of the steps, or how I created this image, feel free to ask! This movie is currently being edited, but I’ll let you know when it’s complete and where you can go see it.

It’s generally hard to explain to those who haven’t had it. For me it’s just a lack of any type of idea. Not just good ideas, I have nothing to put on paper at all. I sit in front of my canvas (Photoshop or Illustrator) and put ‘pen to paper’ and…nothing. Nothing that is worth the money it costs to have my computer on at least.

Sure I’ve hammered out projects for clients through these times and most often the projects turn out alright, but if you’re anything like me alright isn’t what you were going for.

So how do you get out of that creative slump?

1. Have a non-design related hobby. I love to be outside. It rejuvenates me in so many ways that go past the physical. It inspires me to see all of the beauty that is around. I am actually really lucky in that my wife works for an outdoor shop so we spend lots of time that is ‘work related’ outside for her. It doesn’t have to be outside though just find something that is not in front of your computer and you enjoy. How about reading, basketball, photography. All good options and can bring huge amounts of rejuvenation as you open your eyes to those things around you.
2. Personal Projects. Often designers get stuck needing some money and therefore have to take on a less than inspiring project. Projects that don’t get your blood boiling, cool it which makes it harder to be creative. I always try to have a project on the go that is mine. Money doesn’t matter it’s for me. My most recent one was simple, I made a wallpaper for Smashing Magazine. It is a simple picture I took and added a calendar to. Not really a lot of work but it paid off big when I got to send my parents, wife, and friends the link that showed how amazing I was. Honestly it has also paid off work wise. In the 3 days since it was featured I have had 3 contracts come as a direct result. My 2 hours working on it are well paid for.Your personal project doesn’t have to make you any money it just needs to be something you like and want to do. A website for your favorite anime film. A wedding anniversary site. How about a cool poster for your office. The possibilities are limitless just go do it.
3. Put your feet up. So far all of my suggestions will take some energy so how about just resting. I actually have a degree in Psychology and know from years of study how much lack of sleep can affect you.
4. Work in inspiring surrounds. Finally work in places that inspire you. Hopefully your office is a place that inspires you but for some of us that just isn’t the case. I really have nothing to complain about I have the second bedroom in my house as my office. It also doubles as the storage room for all of my outdoor gear, so it does get a bit crowded. Most often I do find my office great to work in but not always. I learned while I was in school that working at home was not always the best way to get good results. Often I would go out to a coffee shop with my iPod and study/write madly for a few hours and produce papers that earned me A’s. I have also forced myself to stay home and spent hours on a paper that should have taken my minutes. If you have a laptop then get out and try some different work areas. Maybe the park will work. Maybe the coffee shop. Maybe a restaurant. Just get out and try it to see if it inspires you out of your slump.

Ultimately having a time in your career where you lack creativity just marks that you have been designing for a while. We’ll all hit it. What will make us succeed as designer’s and artists is pushing past it and continuing to enjoy what we do. – Curtis McHale

Who is Curtis McHale?

I am an in house designer/wannabe full-time freelancer located in BC. I design because I love to be creative and code because I like the technical stuff involved. Creativity is a breathe of fresh air into life that many people don’t get to experience. You can see more of my work on my site and on my blog.

Guest Blogging!

Mel and Michelle are inviting fellow designers to share their ideas, inspiration and advice on our blog every Friday. If you’re interested, please send us an email: mel@collarfree.com OR michelle@collarfree.com. We would love to hear from you!

There so much to read on the internet these days and it’s hard to keep up. Mel and I always try to keep up with our favorite design blogs and have recently discovered rss feeds. I can’t believe I never knew about his before! (thanks Jimmy!) It’s a super easy way to stay in touch with your favorite blogs and provides a great source of inspiration. I use outlook to keep track of mine, but another easy way to subscribe to your favorite blog is through google reader. I was reading 25 Ways to be a More Productive as a Designer on youthedesigner.com. Gino’s post has some great tips that help keep your mind clear in an insane designers world. Here are some of my favorites:

“3. Become familiar with your Adobe Suite Shortcuts” Learning essential keyboard shortcuts for programs such as Photoshop and Illustrator can actually end up saving you many hours in the long run.

Believe me, shortcuts will change your life! Here are a few that I use non-stop everyday:

• Ctrl + F; pastes directly in front of the copied object
• Ctrl + B; pastes directly behind the copied object
• Ctrl + G; groups objects
• Ctrl + D; duplicates an object
• Ctrl + V; paste
• Ctrl + C; copy
• Ctrl + X; cut
• Ctrl + a; select all
• Ctrl + 7; creates a clipping mask
• Ctrl + 2; locks a selection

For more shortcuts go here.

“7. Go to design events, shows and learning seminars” Each year there are many design conferences, events and training seminars. If you work for a company they may even pay for you to go, so you can keep your skills sharp and network!

Mel and I try to stay in updated with local gallery and art events which always turns out to be a blast. Try to get to local museum once a month. I promise you’ll come home with loads of inspiration.

“21. Organize your computer files once a week” Organizing your computer files is arguably even more important than organizing your paperwork. You should have a folder and sub folders for each client and create backups of your files every day on multiple external devices.

Try and create a naming system for all of your files. I try and clean off my desktop once a week. It really helps me focus and stay organized on the current jobs I’m working on.

“23. Try to keep your weekends work free and relax” It’s easy to get consumed with work and keeping your weekends work – free is a good way to ensure you won’t burn out or have a meltdown. So don’t forget to enjoy life on the weekends!

I agree!!! Trade that email and cell phone in for sneakers and a frisbee and get outside. Staying active helps keep my mind clear and fresh for another work week.

Thanks Gino from YouTheDesigner.com! To read the rest of his post go here.

-michelle

Step 1. Type something that you’d like to distress. Open the brushes palette

Step 2. With the pen or the brush tool draw lines over your text in a different color (this color won’t be seen at the end, it helps with separation of images) until you receive the desired effect. Apply different stroke sizes to add variation in your design.

Step 3. Outline the text and group. (Type>Create Outlines) (ctrl+g)

Step 4. Select all strokes created and go to Object>Expand Appearance

Step 5. Open the Pathfinder tool and select everything (ctrl+a). In the pathfinder palette click on merge. Make sure that the stroke color is selected in the fill color. Go to the toolbar and click Select>Same>Fill Color and delete the selection. (I promise it works, it took me a few trys to figure it out, so don’t give up)

Step 6. Your Final Image!

I’m working on some t-shirts for our favorite local singer/songwriter Zank. Which design do you like? I can’t decide.

Hope this helps!

-michelle