Wunderkit

CoDrops

Luhse Tea

Designing Monsters

Starving for Ethics

Nike Vision

BeoPlay

Dataveyes

Build A City

He likes the colours you’ve chosen and raves about the beautiful typography—Great! This means it’s time to start creating a full set of brand stationary: business cards, envelopes, a letterhead, everything. People often wonder how to design these different things in a creative way while making sure the result is a coherent identity, and here are some tips to keep you on the right track.

I think we’ve all seen the examples where people go the ‘easy way’ by simply placing the logo and some basic typography on the front of a business card; Oon the back they place the logo again, inverting the foreground and background colours. I’m not saying this will result in an ugly or bad design, however, the approach isn’t really the best creative approach. Luckily, designing something a little more unique doesn’t have to be very hard…and can go a long way! I aim to share some practical techniques I’ve used in a recent design for a client called Say Green Cosmetics. I will show the entire design process I used and explain the choices I made hoping this will inspire you and give you some ideas for your own branding projects.

First, let’s take a look at the logo

Say Green Cosmetics is a web shop specialised in ecological and biological cosmetics. The logo we created features some pretty green typography and a little icon of a bird, the bird representing the typical Say Green costumer: connected to nature and free to choose the sources where he/she gets the best that nature has to offer. We wanted to avoid chemical additions to products as much as possible. As you can see, the bird is subtly shaped like a leaf, done to represent the strong link Say Green has with nature.

Experimenting to create additional graphics

So there I was, happy that the client accepted the logo design; I set out to create some pretty stationary for the client to use. The first step in creating this was making some additional graphics (you’ll notice it’s really tempting to jump into creating some pretty media straight away, don’t). With that said, make sure your entire identity is coherent first; it’s a good idea to start creating some reusable design elements. I first started playing with some pattern designs; patterns are a good place to start. They always come in handy as backgrounds and can be used on a variety of media. Since I loved the curves in the little bird in our logo, I tried to incorporate those (see below).

In example 1, I liked the green parts, but wasn’t really feeling the negative space too much. I took two birds and connected them at the tail creating a shape that is more inspiring but in my opinion, ended up being a little too simple. With that idea in mind, I copied the entire shape and rotated it 90 degrees. The resulting shape was a little flower-like and seemed incredibly really fitting for our client (I experimented a lot more with patterns, but these examples illustrate my point enough).

Creating ornaments from the pattern

Really satisfied with the pattern shape,  it reminded me of those old fashioned floral ornaments that you see in antique books—or at your grandmother’s house. That gave me the idea of creating my own modern version of these ornaments for Say Green Cosmetics. I took one of the flowers from the pattern and started building upon it again.

As you can see, experimentation is key. I started with shape 1, which I found too simple, and then copied and rotated it to create a something a little more complex. The resulting shape is pretty, but you can hardly spot the bird from the logo in it; that’s why I added colour (example 3). In my opinion, the green was way too strong, so I gave it some transparency, as seen in example 4, to soften it up and add some depth. I wondered what would happen when I’d repeat the first step, so I duplicated the shape and rotated it again. However, this shape was losing the ornamental feel I like so much in the first shape and why I eventually settled for shape 4.

Using the newly created design elements

At this point in the design process I was armed with some pretty design elements that really went well with the logotype. That’s a really big plus of using the logo as the basis for your design elements. Now the last step I took was using the elements in a creative way to create the stationary. For example, take a look at the business card I designed.

As you can see, I pushed the size ornament to give the business card a unique look. To ensure a feeling of balance, I used pretty basic typography so that it wouldn’t fit on the page. This made sure the end result wasn’t too distracting. The real unique application of the ornament was on the back of the business card.

I positioned nine business cards on one sheet of paper and positioned three big ornaments on them. After printing and cutting, the result was nine unique abstract backgrounds. All nine of them were derived from the basic logo, so they had the same type of curves, colours, etc, making the whole business card very coherent. Now, after I discovered how pretty this ornament was when used large, I made sure to bring this on a couple more elements. Take a look at some more examples, you’ll also see the pattern I designed earlier popping up:

Summary: Experiment, Experiment, Experiment

In this article I tried to show you a simple approach to creating some interesting stationary using your logo as a starting point. I did everything possible to the early, simple bird shape: copied it, rotated, resized it, gave it a different colour, et cetera. The end result was a set of unique shapes that really go with the style and feeling of the logo. It all comes down to experimenting and not being afraid to go over board. As long as you copy every shape before you start editing it, it’s really easy to go back to a previous version you liked better.

Of course this is just one approach, there are tons of others thing you can do when creating stationary. I’d love to hear if this design process worked for you! Show us some of the results in the comments or some other approaches you take to creating quality stationary.

The Chase – Trailer from Philippe Gamer on Vimeo.

Build A City Film from Between Pixels on Vimeo.

Still Life from Scott Garner on Vimeo.

Hyper Geography (2011) from Joe Hamilton on Vimeo.

Mike Fudge Demo Reel 2012 from mike fudge on Vimeo.

As such, I have always been drawn to simple and clean designs that convey meaning at a glance, yet still have an air of mystery about them. When I see a book cover or film in black and white, I like the feeling of being transported to a different time; the designer’s crafty creative techniques, consequently, having an effect on me.

Bookworms, budding designers, and even the occasional blog-wanderer, will find this particular round-up of book covers inspiring. Here are 25 photos of black and white book covers that caught my attention:

A Mad Desire to Dance

A Photographer’s Life, 1990-2005

Andy Warhol, The Day the Factory Died

Atonement

Brideshead Revisited

Creature

Ellsworth Kelly Reliefs, 2009-2010

Empire Rising

In Cold Blood

Judging Obscenity

Love, London

Metamorphosis and Other Stories

Milk

New Yorkers as Seen by Magnum Photographers

Out of Step, Faces of the Straight Edge

Religion Explained

Subway Dreaming

The Abomination

The Book Thief

The Glass Castle

The Great Gatsby

The Theatre of the Absurd

Vanity of Duluoz

Vita

Yvon’s Paris

We’ve been taught to not judge a book by its cover, but with designs such as these, we cant help to be instantly drawn to the book.

I hope you enjoyed this collection of black and white book covers, and sound some you love. Share which were your favorite book covers in the comments section below or recommend some you enjoy.

Zero Bundle

Styiens

50 AIGA

EDITS Quarterly

Mathieu Strabach

Ramotion

Tobias Van Scheider

Graz Secrets

Tombras

<Code/Racer>

Bones

The Social Network “Going Live” Typography from Jorge Sandoval on Vimeo.

Binary 2.0 from Jeroen Krielaars on Vimeo.

Boy Meets Girl from Ben Mounsey on Vimeo.

Moshun from Jeroen Krielaars on Vimeo.

Stephen Fry Kinetic Typography – Language from Matthew Rogers on Vimeo.

Mindshare “Storytelling” from Andy Martin on Vimeo.

Mashable. Our first Web Critique to start off the week fell a smidge flat. Partly because Mashable is so boring. While they make use of pretty good design philosophy, there really isn’t a whole long going on. Their brand is too weak and doesn’t quite break through the generic styling to give us much to chew on.

TheNextWeb was, I think, a nice transition from Mashable. We got a chance to introduce a quality blog with some nice styling and strong branding. It was a bit night and day where had a refreshing moment to look at TNW and get a feel for how different the blog was and the impression it made on us. Great design, backed by nice content and great functionality that was easy to use.

Smashing Magazine was just great timing. They happen to release a new visual update as we were planning Web Critique Week, I don’t think the timing could have been any better. With that said, we got to look at their new design and offer a little insight on the responsive design they built into it. Unfortunately, much of the Smashing Magazine brand isn’t translated as well on their new design and, personally, it fell flat overall.

Think Vitamin isn’t my favorite blog of all time, despite some of my high praises, but in a way, it rediscovered how some unique styling can be really refreshing. Some elegant design decisions on balance really seal the deal for me on this blog and was a blas to review and look at. Not much can be said about that footer, but we’ll leave it be for now.

Web Critique Q&A

Why did you decide to start Web Critiques?

Mike: When I was brought on board I wanted to bring my nature of critique that I had refined through the years of design and bring something new to the design community both for the Inspiredology community and outside of that. Andrew and Chad were great about letting me try out the idea…they liked it so I kept at.

Chad: Yeah, it was Mike’s idea to introduce Web Critiques – initially we did one a month, but we thought a whole week would really offer a lot of value and insight to our readers.

What was the reason for doing a whole week of Web Critiques?

Mike: We have been enjoying the Web Critiques and the value they were adding to The Lab. So we wanted to give them center stage and make the public more aware of these articles.

Chad: See my answer above

Do you think the Web Critique Week was a success?

Mike: I think the traffic probably agrees that we saw that the critiques were adding more value to the community. I would like to see more engagement in the discussion of the sites within the community, as our previous critiques have had nice community discussions.

Chad: Simple answer – Yes!

Andrew: Yes I think it was certainly a success. As Mike said, more engagement would have been amazing, so that we could get some good conversations going within each critique.

What would you have liked to have done differently with this week?

Mike: I wouldn’t have minded some more time on each review. I wish we could have broken things down more indepthly, but unfortunately we are limited in time.

Chad: I think we can take it to another level still, instead of just a critique – we can go deeper and maybe offer improvements. Show what Smashing Mag and Mashable might look like if we controlled it.

Andrew: It could have been interesting to get members of the community involved in the actual critique post, to offer another opinion outside of the Inspiredology family.

Will you be continuing to push the Web Critiques in the future?

Mike: Yes! Of course, we’re trying to get one solid critique a month.

Chad: For sure, I think this week proved it’s value to the community.

Are we gonna see another Web Critique Week?

Mike: It is very likely. This week, as you probably could tell, we focused on blogs. Who knows when the next time will be or what the focus will be on, but its likely we’ll see this again.

Chad: We will be sure to revisit the traffic and value but I have no doubt that this won’t be the last one.

Anything you’d like to add about your Web Critiques?

Mike: We have been trying to get community to feel engaged, offer feedback, and want to get their own work critiqued. I think these critiques, those centered around our community, would provide the BEST value for Inspiredology and whoever submitted it. If you have a site you want critiqued, send us an email or tweet us! Its pretty easy and we’re mostly friendly dudes. We’d love to also hear what you think about these critiques in terms of content, style, or anything in particular!

Chad: What Mike said!

Inky Deals Winter Bundle: $500 worth of design resources for only $29 + BONUS

Style and Function

When we talked about some of the blogs we’d want to take a look at, that were relevant to our community, we really jumped on the idea of looking at Think Vitamin’s design blog. Bringing in some new flavor to the blog atmosphere, Think Vitamin brings a lot of style to what looks like a sea of generic styles (though not always a bad thing); I was very quick to welcome the refreshment. Since their style is so important on the actual function of the homepage, I have included both parts of the discussion in this heading. Unlike the other blogs we’ve looked at, the styling (I use that term somewhat loosely to determine pretty colors, fonts, graphics, and etc) didn’t really affect the page in the way that it changed how users navigated. Smashing Magazine did create some negative conflict with all the ads that they use, but I am referring to how design reinforces positive browsing on the blog.

With that said, one of the best things going for Think Vitamin is their unique use of circles and colors. While their style certainly is “trendy”, it isn’t really trending for design blogs. The circles and rounded buttons contrast perfectly to the big, background box that encompass the lead article. This contrast really hones in on the main topic as a focal point, coupled with large and inverted (color) type, you have something that brings the audience in. It is a very clean and simple way of creating emphasis without getting too fancy with gradients, bevels, shadows or what have you. Think Vitamin doesn’t do anything special in the way of how you navigate the site’s pages. We still see the typical two column layout, with page navigation on top, though TV (Think Vitamin) uses asymmetry to balance their page. Careful decision was made to have their social media icons and topics near the top of the page. This position alienates white space which the left column tends to use up. The social icons, and ads, add color variety so when our eye sees this, we get this wonderful push back to the content column (left). This is a pretty elegant tug-of-war that goes on.

With all the cool things going on and creative style in both function and aesthetics, I am disappointed in the treatment of their logo; I would have preferred a more prominent stance and put less emphasis on “Curated by Carsonified”. That said, there isn’t a lot to dislike. The blog could benefit for a little contrast in the content column to give the audience some base, otherwise I really enjoy taking a look at the site and browsing. I am a big promoter of using large type; I think that is because I stare at small pixels and smartphones all day, so my “design” eyes get stressed. Think Vitamin does a nice job in creating a responsive layout, very similar to how Smashing Magazine built there’s. It does not suffer from the blunt ads on some sizes, and is overall successful.

Chad’s Take

Think Vitamin offers a unique design, and it’s one of the best blog experiences. Not like Smashing Mag, Think Vitamin keeps you focused on the content feed, their topics and page menu are by far secondary areas. TV does a great job of highlighted their featured story, and keeps you scrolling down through the other posts. I prefer this way of browsing a blog, I would bet TV has much more loyal readers than SM – based on this design.

Post Detail Pages Get Some Love

Finally! We see some discrepancy between the homepage and post pages. After really looking at so many blogs, maybe I am alone in this. As a user, I want a very easy browsing experience; whatever the designer can do to make it easier, I am all for it. Being able to tell I am not on the homepage is a big plus for me. TV brings a very subtle touch to their detail pages, because overall, not much does change. What does change, however, is the introduction to social buttons like twitter and facebook. They also leave an artifact from the homepage…did you guess it? The dark gray bar is the artifact you see from the main article and is the divider that says: “Here is the rest of the post you were looking for”. Brilliant, simple and effective—I can easily browse.

Chad’s Take

Really enjoy the dark horizontal bar that separates the content title, meta details and share buttons. It allows you to dive into the core of the content. I agree with Mike – love the large type – easy to read – looks great, and the nice 80% black works really well. My only issue is when the site has a short post – it doesn’t work well with their design. With the different strong horizontal lines and buttons, it’s really hard to tell where the core of the post is, and you can easily skim over it and be lost by the time you see the comment feed.

The Chicken Finale

Well then. If you have been following these critiques, you’ll know I have an affinity for good looking footers. I couldn’t tell you why, but I think every site needs a great base to ground it in. No question TV falls real short in this category. With a nearly nonexistent footer, TV attempts to seal the deal, close the sale if you will. What it turns out is that if you land on their footer, you’re out of luck—there’s nothing there for you. Though I am slow to say things like this, but it looks like a bit of laziness kicked in here. No question designing big blog themes is not a quick or easy task, but go all the way, not 90%. I do enjoy the placement of the Think Vitamin logo, however. A little chicken, if you ask me, to not continue their bold design approach to the footer.

You Turn

The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from. We are showcasing the Inspiredology Web Critiques this week by taking some big names and breaking them down, one day at a time.

We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology,@thejellymon, or email me.

As we continue to look at top noch blogs this week (Mashable and TheNextWeb) it is only fitting that we take a look at Smashing Magazine. Fortunately for us, they just did a new redesign to kickstart their 2012 year; unfortunately for them we’re here to break it down (for the greater good of course).

Homepage

Now, I am tentative to describe and take a look at this homepage since its possible everyone may have a different experience. Smashing Mag took considerable effort to make sure that their site scales correctly to any device or screen size…it does, it looks great, and it works great; this is one of the hot topics circling their new design. On a standard 21″ display with 1920×1080 resolution, you should see the whole experience. Nothing falls short—you get the ads, categories, other pages, the works. As your screen gets smaller, or you grab the corner of the window, Smashing Mag does a smashing job of deciding what is the most important information for you to see—no doubt their branding and the content, cleverly leaving out the ads.

The removal of the ads is a nice touch for 2 reasons: These ads aren’t anything pretty and they’re distracting, but also because on smaller formats you’ll lose your customer (making reference that blog users are customers, member or not) if they had ads that get in the way of the content they want to see. This is the idea of customer expectation. Most users have an expectation when they land on a link or post or what have you, anything that does not align with their expectation (good or bad) can result in them bouncing right off. Manage these expectations by being honest and don’t use headlines or images that aren’t fitting to the article just to grab user attentions.

About that homepage. While they have different experiences you can have based on what device you’re using, we’re gonna look at their homepage from a desktop perspective. After spending so much time with TNW, I am hooked on how they accomplish and utilize their branding. Looking at Smashing Magazine, its clear that their brand isn’t the focus. They hide their logo in the top left and, overall, their colors are some what generic. All this passive-aggressive approach to branding does have 2 main advantages in this case: focus on the article content and focus on ads. This is great in that you can easily find your content but there is a rift in the balance of their pages. I often find my eye bouncing around between article content and the ads making it difficult to focus on the article.

Chad’s Take

First thing I can say is – “it’s about time”. Smashing Mag has fixed a number of issues with their old site – it’s probably best that we didn’t critique the old Smashing Mag. Let’s focus on the new – responsive design is by far their best feature and upgrade. You can see the design fits within Elliot Jay Stocks wheelhouse of clean, subtle layout and design. The same old problem still arises – ads, Smashing Mag is by far the most popular design blog out there – and yet they still pack 16 ad banners on the site. You would think they could figure out a better way of making money. For me it seems like it’s more greed than anything. I understand it’s a business and it needs to make money, but it seems like they are making more than enough of it.

Andrew’s Take:

Depending on resolution, the entire layout changes, and to be honest I tend to like it better in a smaller window. When the site is blown out full screen, the logo shrinks and seems to disappear, and the navs get messy in the vertical format—I’m not sure how great of a decision that was. I also find the right sidebar now to be a bit TOO ad heavy. Believe me, I am an advocate for display advertising, but it does tend to take away from the content in this new layout.

Function and Style

Their homepage retains all the info you need to find exactly what you’re looking for. Buttons at the top take you to different pages and are discreet making sure to not detract from the experience. Smashing mag also recognizes some of their most popular topics and categorizes them on the left for easy looking. Unfortunately, they hide their search feature opting for more clicks. Its hard to find if you aren’t looking for it and because of the rift between content and ads, you seldom find your eye traveling up to locate it. The post detail pages don’t differ much at all when compared to the homepage (so they wont get their own category); they don’t have any unique ability to share media socially like Mashable or deviate much from their homepages exact style and I find the lack of differentiation, confusing.

Chad’s Take

For me the best thing other than the responsive design is the left navigation. Love the double knock up tab navigation – you feel like your on the Smashing Magazine site when your their, as well as the Smashing Network without leaving the site. It’s focused and consistent. I also like the hover effect on the category and sub-category labels. The new colour scheme is soft and settling, at the end of the day the new site offers a great user experience without losing it’s focus on the content.

Andrew’s Take:

Overall I think the Smashing Magazine redesign was a successful and a much needed update. Not sure that they need to veer SO far away from the Smashing that we have all grown to appreciate, but there are certainly a few changes for the better. The major one being the responsiveness of the site, I can dig that.

Bring on the Feet…I mean Footer

The footer does a nice job of managing my expectation, mostly. They continue their soft style right down to the bottom and they showcase only relevant information for the blog. Its clear that Smashing Magazine recognizes success in people who search for content solely by clicking through categories, it seems this is how most of their users look for content. Otherwise, the foot does a nice job of bringing together important and relevant content. And then, as I am singing the praises of this footer, we find a cute little kitty. There isn’t much to say about this except that they added in the cat for fun sakes…so we’ll let that slide.

You Turn

The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from. We are showcasing the Inspiredology Web Critiques this week by taking some big names and breaking them down, one day at a time.

We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology,@thejellymon, or email me.