Bernskiold Learning » Design

FancyBox: The Apple Style Lightbox

Erik Bernskiold — Wed, 03 Feb 2010 20:00:17 +0000

There have been many clones on the ever so popular lightbox javascript that has been a big trend for quite some time, not only because it looks nice but because it is a useful way to display information in, without opening a new window.

Many with me are admiring some of the effects that Apple uses on their websites and web services and on their main website, they are using a lightbox as well (surprise surprise). What should be no surprise either is that it looks pretty darn cool. Luckily for all of us, there is a clone for this style as well, called FancyBox (and it is free).

If you are running an Apple themed website, or you just want a classy lightbox, have a look at it. It supports both images, videos, ajax loaded and iframe content, with a 1.3 version coming soon (currently in release candidate) that supports flash better as well as many other cool features.

Do you use FancyBox? Do you have another favorite one? Let me know in the comments!

15 Brush Packages for Photoshop to Fill Your Collection

Erik Bernskiold — Tue, 19 Jan 2010 11:00:33 +0000

In Photoshop, Brushes can be very powerful and be used to design pretty much everything. They are used in pretty much all design trends by a lot of people, from the floral designs, to the grunge ones.

Today, I have a list with 15 brush packages for Photoshop that will fill your collection or quality brushes. Have a look and see what you think. Did I miss your favorite brush set? I’d love to know about it in the comments.

Tip: Click on the brush title to get to its page where you can download it!

Life Brushes

Tech Brushes

Shape Brushes V1

Halftone Brushes

Vector-Grunge Brush Pack

Abstract Brushes

Floral Deco Brushes 2

Snowflake Brushes

Hearts Photoshop Brushes

Splatter Brushes

Glitter + Sparkle Brushes

Vector Line Brushes 2

Nebulae Brushes

Winter Breeze Brushes

Suddenly Spring

Summary

There are many good brush packages out there and this just in a mixed collection. What do you think, did I miss your favorite brush set? Share it in the comments. I would love to hear about it!

NAPP Interviews: Ask the NAPP Staff (including Scott himself)!

Erik Bernskiold — Wed, 13 Jan 2010 18:55:04 +0000

My dear friend, Firgs is doing an interview series on her website (Design by Firgs) with the staff over at NAPP (and Photoshop World instructors and key roles). Each week leading up to Photoshop World, there will be an interview with a staff member on NAPP, both the public faces and the people behind the scenes, making the magazine happen, making the podcasts come out. There are some seriously talented folks there, so take your chance and ask them your questions.

The lineup includes public faces such as RC Concepcion, Matt Kloskowski, Terry White and none other than Scott Kelby himself. I know that you have always, wanted to ask Scott about his most embarrassing photo shoot. Fine, secretly I know you have wanted to know what pattern he likes best on his socks, striped, plain or dotted. Now is your chance!

What you absolutely want to do, is take the chance to ask some questions to the more hidden faces, doing all the great things you enjoy from NAPP, aside from the tutorials. You can’t see an issue of Photoshop User Magazine go by without seeing Taffy Clifford’s work! She is one of their awesome graphic designers working on the featured article pages in some of the issues. Or, Leslie Montenegro, who is marketing graphic designer, in charge of the marketing graphics.

Basically, what I am trying to tell you all, is that this is a golden opportunity to ask what you have on your heart. Especially to the behind-the-scenes crew. How often to you get to ask about the real-life creation process for the magazine? I thought not…

Get yourself over to Design by Firgs and submit those questions!

The Hidden WOW Factor

Erik Bernskiold — Tue, 02 Jun 2009 11:00:37 +0000

While being a very subjective art form, design needs to make an impact. It’s simply why we as designers get hired to do good designs. They need to make an impact on people, preferably without them noticing.

I want to give you all a challenge. For a couple of days, try to be wary about the every-day design that you are exposed to. Newspapers, advertisements, posters and such things that you generally just use or see without thinking too much about them. Look at them from the designers perspective. What have the designer done and how have he or she designed it?

This principle by all good design is that you’ll really never think too much about it but instead you choose that magazine, buy that product, use that software and so forth. It is these hidden WOW factors that can separate two products with otherwise as good content within.

This however is of course no easy task, and just thinking about the fact to “design something as good so that people won’t actively think about it”, makes at least my head a bit dizzy. Instead of thinking about it that way, I propose you set out to do my challenge, be wary of the every-day design out there and dissect what is good about it. Sure, it is very much a theory thing but once you have for a while, you start to get these thoughts inside your head and then start to do this without even thinking. It is when that happens that the design really gets to the good point. Good design, without thinking about it.

Good Design Does Wonders

Erik Bernskiold — Mon, 11 May 2009 11:00:36 +0000

It’s He Said, She Said week this week which means that tomorrow there’ll be an article here on the site by Elizabeth Gast (and I’m posting my thoughts on the same topic on her site), because of that, there will not be a design themed Tuesday post! Instead, I’m going to combine the business side with the design side today on the subject of good design and what it can do for you. Nowadays, we are very aware of design however most of the time just not conscious of that. Say for example that we go to a company’s website and are interested in their services/products. Let’s also say that they are a smaller company that have their products available through order on their site only. When you come to the website, it looks rather old and not really like most of the sites you visit. That is exactly what I am talking about.

Design-awareness lives subconsciously

I really do believe that our design-awareness always is turned on and is somehow active. In the example above, we would draw the conclusion straight away, almost subconsciously that the site might not be legitimate and thus, we probably wouldn’t order out of fear that it is a fraud. The question now stands, how many times have you done like that? We naturally make decisions based on how things appeal to us, be it food, music or design. By not acknowledging this, you run a big risk!

Keep the Design Good and on Par With the Rest!

The solution is pretty simple. Keep your design at a high-quality, a quality that matches what everyone is seeing out and about every day! You grow accustomed to what you see every single day and anything that is of lesser quality will be thought of as less professional. So basically, if you cannot design on that level yourself, hire someone who can! This can be a secure way of gaining customers.

If you are the designer, you definitely want to make sure that you think about everything that could eventually be used. Think of possibly odd form additions to the site, useage of RTE editor HTML tags that a client might use without knowing that you say, haven’t styled that tag. If you can make sure your client’s website looks brilliant as well being worry-less for your client, you are in for a good ride!

5 Beginner Web Design Mistakes

Erik Bernskiold — Mon, 27 Apr 2009 17:23:38 +0000

As you are starting out, making mistakes is inevitable. Even as you get more advanced it is easy to make the same beginner mistakes as you did at first. I have done it and the guy next to us have also done them. The good part is that doing them only makes us better and helps us improve, if we catch them!

1. Failing Typography

It is all too easy to only think about the “shell” of the site and forget about the typography. To be speaking about the design of a site however, the typography needs to be up to par as well as it is the most vital part. The main goal of a site is that people read it and come back or order (depending on the site type). If the typography is bad, then it will be hard to read and the user will just go to another of the millions of sites available with better typography. Clear headings and a good amount of line-height are some tricks to use and there are lots more! Just think about the typography!

2. Not Having a Clear Navigation

It is far too common with sites that have a bad navigational structure. This, inevitably, makes the site hard to navigate and also hard for visitors to find what they want. As before, if they don’t find what they want, they will go to another site! Usually a page should be directly accessible within two clicks from any page on the site. By taking to a clear navigational system you will ensure that visitors will get to the right place! If you can, test your new design on a mixed group of people to find out what they think.

3. Colour Clashes

Uggh! We all hate clashing colours. It makes it just unpleasant to watch a page and causes you to hit the X key faster than light (well, close anyway). It doesn’t need to be really large clashes, even small, tiny colour clashes will show through. Test, experiment and test again with a different colour to find the best possible for the situation.

4. No Margins or Paddings

Another annoyance is when there is not enough room around text or images on the page. Breathing room is important. Just look in any newspaper or magazine. Is the text right up against an image? No! By giving text some breathing room around the edges of a box and giving images some breathing room to the text will enable a visitor to read through your content easier and it’ll look more inviting to do so.

5. Leaving Unaccessible Pages Linked

I admit that the heading might have been a little unclear but leaving pages that shouldn’t be accessed by visitors linked on a page, is just confusing. Say, having a login page link clearly visible in a prominent location of your site when the avarage user cannot login. It creates the message that you somewhere, can register. When there is visibly no place to do so, it creates confusion. If all a login link does is to lead to an admin panel, bookmark it and hide it from the website.

There are many more mistakes that you can do when designing a site, but eliminating these (especially typography) will get you a long way! A top-tip is to sleep on any web design before running with it, showing it to a client , etc., as clearing your mind (sleep) gives you a new perspective at it!

Seven Places for Design Resources

Erik Bernskiold — Wed, 15 Apr 2009 11:00:01 +0000

We all need to go somewhere to get inspired and to get resources to use in our creations. There are many, many places out there that provides good resources for you, either to learn the latest tools of the trade or to pick up elements to use in your creations.

PSDTUTS

One of the best tutorial websites online that focuses on Photoshop tutorials. With a vast database of user-submitted tutorials that are of high-quality, you can learn a lot of different effects as it is more effect-based than tool-based, which might be what one needs after a while right! Definitely browse through the site and see if you can’t pickup a couple of new tricks to add to your bag!

Smashing Magazine

Magazine-styled blog, Smashing Magazine constantly puts out inspirational articles. It can be from listing a number of superb designs to having interviews with the big industry persons. All articles are really helpful, especially for the web oriented creative professional.

Design Shack

Continuing on good resources for the web person, Design Shack is a site where you can find web design/development related articles as well as links to other sites with great articles from time to time. The site also features a large web design gallery where you can find inspiration and be amazed at the other raw talent out there!

iStockPhoto

For any professional project where you need professional photographs or illustrators, iStockPhoto is a great resource. They have got a lot of people contributing to the site and the contributors really submit quality work. Whatever you may need in terms of photo related stock, you’ll probably find something that you like in the iStock database.

Sxc.hu

On the same theme of stock photography, if your budget is a bit more limited (or non-existant) take a moment and search the stock exchange (sxc.hu) that has got some pretty good user-submitted, fully free stock photos. It is not as good as the paid iStock but you will probably find something that you could like.

deviantART

Down to both resources and inspiration, deviantART provides just about everything. It’s rightly one of the largest art communities online today and has been for a while, which shows! On deviantART you can find talented artists sharing their work but included in these artists is those who release their work for the rest of us to use. You’ll find icons, some stock photography and just about everything that you can imagine.

DaFont

Even if we have loads of fonts on our system, we are always on the lookout for more! DaFont is one of the largest sites containing thousands of different fonts that you can download. Most of them are free for personal use and a lot are even free for commercial use as well! It’s where I go for most of my font needs!

Inspiration and not Copying

Erik Bernskiold — Mon, 13 Apr 2009 11:00:13 +0000

There is a certain difference between taking inspiration in someone’s work and to copy it blatantly. Surprisingly enough (or perhaps not), these posts are usually written when you’ve had someone copying your work, but as a contrast to that I thought it might be a good thing to bring it up outside of those circumstances.

Inspiration is key!

There is definitely nothing wrong about becoming inspired when seeing someone else’s design. On the contrary, drawing inspiration from recent designs that you have seen might be a good way to improve your own skills and sharpen them further. However, there is a certain line that you can go across that takes inspiration and turns it into copying.

What is copying?

Putting it simply, copying is when the work that you do is so similar to someone else’s that you could tell that they are the same thought. No matter how poorly done the copy might be or how even how great might be, it doesn’t change the fact—going over the line is not the way to go and won’t improve your skills rather get you in trouble.

Easy to spot the difference!

Most times, spotting the difference between an inspired art work and a copied one is really simple. As a typical rule, the copy will have certain areas that looks good and others that doesn’t fit. This is mainly as the creator is trying to re-create a lot of the look of the other design but at the same time trying to steer off and include his or her own ideas. Usually that clashes and creates a noticeable difference.

An inspired art work is usually different. Maybe you can see parts of it that resemble the look of something you’ve seen elsewhere but is fully twisted to the style of the designer who is using it. Perhaps it can be really subtle effects like applying a shadow in a certain place or by using a certain combination of bold and normal font weights. Whatever it is, it isn’t overdone and it doesn’t clash with the original design.

Ten Great Fonts that I love

Erik Bernskiold — Wed, 08 Apr 2009 11:00:15 +0000

As a designer you need to have great fonts as the use of these can either make or break a design. As we have covered before, typography is important both on the web and in print and it can be a daunting task to try and find some great fonts to use! I’m here listing ten of my favorite fonts I use and love, all for very different things! To get to a download/purchase page, just click on the font name!

Hypatia Sans Pro

Delicious

Zapfino

Cracked

I have been unable to find this font (Cracked) again online to share a link.

Anivers

Dali

Fertigo Pro

Cochin

Kelly Script

Journal

Design Typography Matters a Great Deal

Erik Bernskiold — Mon, 09 Mar 2009 12:00:32 +0000

Since this is Erik’s birthday week, I am giving him the gift of some time off. Hi everyone! It’s Firgs from DesignByFirgs.com.

Last week Erik covered all the ins and outs of typography on the web. If you haven’t checked it out yet, than you should, there is a lot of great info there. Today however, I am going to pick up where he left off and talk about using typography as a design element and I’m going to briefly touch on some “Rules of Type as Design.”

Why is it so important?

First of all, to get you in the right state of mind think of typography this way: each font, each letter is not just a letter – it’s an individual graphic. Many people put lots of time and work into crafting letter sets, in fact, for some, this is all they do. Fonts evoke emotion and choosing a font for your design can actually become a very personal thing. Fonts can be very beautiful, silly, wild, somber, professional, dirty or even downright ugly. And because of this emotional tie, the right font can make or break your design. But beyond picking the right font, knowing how to use the font in the best possible way is also important. Because fonts are also graphics then it is very easy for them to compete with any images you may be using. For example, if you have poor font usage next to an award winning image, the fact that your image is so great won’t matter one bit because all anyone will be able to see is your typography. It would be like putting on a violent and angry face to profess your undying love and affection to a complete stranger. Ever heard the term “type face”? Well, now you know why. So let’s learn how to put your best “face” forward.

Design Typography Basics

There are two things that I feel are most important when working with type as a design element, and knowing them can make it a lot easier. First of all – get to know the font lingo. Know what the difference between a single font and a font family, between a faux bold and a true bold, between a base line and a mean line, and an ascender vs. a decender. Know what point size, cap height and x-height are and what is the difference between a sans serif vs. serif font and when one is used over the other. Then, after you’ve done all that – get to know the rules. Beyond knowing how and when to adjust your kerning (the space between letters) or your leading (the space between lines of type) - rules such as “three type faces to one design”, “keep it readable”, “pick the right font for the right occasion”, “use complimentary fonts”, “treat your font as a graphic”, and “use with moderation” are just some of the rules that will help you manage creating effective designs with typography. And once you know the rules, then you will know how and when to break them in your design.

Typography as An Art Form

Plain and simple - type is art and should be treated as such. It’s not just something that you use to fill up space or just to put at the top of an article / the bottom of a photo. It’s a message within a message. Keep in mind, what you say is just as important as how you say it. So take a look at your type and really choose wisely, because when you just slap something on, people will take notice and instantly pass a judgement. Did you just make or break your design?

(For a more in depth look at design typography – please see my “Working with Typography” PDF three part series available for download at http://designbyfirgs.com.)