Design:

27 Jun 2009

23

19 Web Design Blogs you Should be Following

Need an extra boost in creativity? Follow these 19 web design (and some development) blogs to learn, grow, and become inspired.

Whether you’ve heard of all of them or not, everyone of these blogs is worth a follow.

26 Jun 2009

6

The 5 Worst Mistakes That Web Designers Can Make

Being a web designer is a bit like being a famous basketballer. There are so many people looking at your work, pointing out your flaws and following your every move. But unlike a basketballer, our profession is constantly changing. We have new technologies, trends and fads to follow. And in this fast paced environment it is easy to make mistakes.

In this article I am going to show you the five worst mistakes that web designers constantly make. Some of them are to do with designs and coding and other are to do with networking and branding. Avoid them all equally. They could come back to haunt you.

NOTE: If you can think of any others please drop a comment and let us know. It might really help someone out there.

1. Having a poorly defined brand

What is your brand? Can I discover what your brand is within the first five seconds of visiting your website? Do you constantly reinforce that brand or are you always parting from it? The worst mistake that a freelance web designer or web design company can make is having a poorly defined brand. It will spell the end of your career.

Why is it important?

So why is branding so important? It is simple. It differentiates you from the rest. And we all know how important differentiating is. There are literally millions of web designers out there – you need a way to stand out or you will be just another dope in the crowd who will get overlooked every time.

What are you offering?

Branding is also about knowing who you are and what you are offering. Are you designing $5000 professional websites for up market companies or are you using templates to give people a website for $400? Do you promise two week turn around times or will you take six months? If you don’t have a well defined brand you will not know what you are offering and that will make it almost impossible to sell.

If you don’t believe in your brand, how do you expect other people to? If you don’t even have a brand… well, what more do I need to say?

An example of a well defined brand

A classic example of a well defined brand is Nike. Of all the brands ever created I am of the opinion that Nike is the best. Their logo (the swoosh) is synonymous with success and “correct answers” and their three word catch phrase “just do it” evokes emotion and imagery extremely well.

Nike Logo

When it comes to Nike gear you don’t care what the price is because you automatically know it is what you need. It is endorsed by the Michael Jordan, Tiger Woods and Roger Federer, all of whom reinforce in your mind that Nike is what you need to be the greatest.

If you want to be a successful web designer you need to solidify your brand as if your life depended on it. Make sure you know who you are, what you offer and why you are different from the rest. Without this concrete grounding your business will be forever shaky.

2. Making clients’ sites load slowly

I love images. I love big, unique, professionally taken photographs. I think they make a website come alive. But initially I used these images poorly and as a result my client’s websites loaded slowly. This had an impact on my business. Let me tell you how.

Simone Hanckel Photography

Simone Hanckel Photography: A great fast loading image site.

A story about loading times

One day I got a call from a person who had been referred to me via a friend. They wanted a website for their perfume shop and so we met up for coffee to chat about their options. The cafe had wireless internet so I could show them my portfolio. The problem? All of the image based sites I wanted to show them failed to load. The mixture of slow cafe internet and badly saved images meant that it timed out. I didn’t get the job.

People are fickle

Take a look at how you react when you visit a website that you’ve found on Google. If it takes longer than about three seconds to load do you click “back” and go to another site? I know I do. You need to remember this when you design a site for your clients. Make sure it has a fast loading time and doesn’t take too long to browse between pages, bring up images, etc.

How to make websites load faster

This is an article in itself so I want to keep these tips brief. If you want to make sure your websites load fast you need to:

  • Save for web and devices
    Make sure you save your images in Photoshop using the “save for web and devices” function and setting the appropriate level. If you use the regular “save as” function the images will be too large.
  • Reduce unnecessary code
    Part of the reason the web design community hate the old school tables commands is because they create a lot of extra code. Always find a css solution and keep your web page files to a bare minimum. Its only a small thing but it makes a difference, especially on more robust websites.
  • Simplify your designs
    You need to reduce the amount of different files that you have on your website. If your website is calling up images, flash, java, html, sound files, css, etc. your site is going to load slowly. Keep the design simple and clean and reduce all these requests.

I think that slow loading times is one mistake that beginners constantly make. It might seem like a small issue but in reality it will annoy your clients and your client’s customers. Make sure that website loads like a rocket.

3. Not delivering your product when you said you would

At Taplin Web Design we take the mildly brave step of giving our clients a “post-production survey” which asks them what aspect of our service they were happy/not happy with. Something that has come up once or twice is that delays are super annoying.

Laptop Stress

Why delays suck

Now, let me be clear. My company normally has a very fast turn around time. But on the odd occasion when our coder has been sick or our servers have been down we have had to unleash a website a day or two late. And the client hated it. Every time.

This is understandable. The client has worked themselves up into a mini frenzy waiting for that website. If you are a good salesperson you have probably pitched it to them such that they now really believe that they need it up and running as fast as possible. So when you turn around and say “it is going to be a day late” they get upset. And they pass this information on to their friends. The last thing you need in a fast-paced, highly competitive business world is a reputation for being tardy. It just won’t do.

The one saying to live by

I grew up in family of very successful (non internet based) business people and they often gave me pieces of advice on how I should run my web design firm. The one saying that has stuck with me all these years is:

“Always under promise and over deliver.”

Now, this does not mean you should down talk your product and undersell your skills. That is not the point. The point is to avoid making promises that you can’t keep and always attempting to surprise your clients by exceeding their expectations.

How to under promise and over deliver

If you have a client that has asked you to upload 100 images to their website you should explain that this is a time consuming process and that it could take up to a fortnight. Then make sure it is done within 24 hours. Send them a nice SMS or email letting them know that you value their ongoing business and as such made it a top priority. This is how great relationships are built. They will recommend you to everyone.

4. Not organizing your time properly

If you are a freelancer you will undoubtedly be a very busy person. Most freelance web designers have five to ten projects going at one time and, if you don’t organize your time, you will get lost.

Two Phones

For example, you might have three web design clients, two content creation clients and some images that you need to edit for your own websites. Now you get a phone call from a new client and begin work on their project straight away. After a week you realize that you are behind schedule on the other three web design clients and the content creation is just never going to get done. Not only will you lose your clients, you will not make any money.

How to organize your time better

It is vital that you create some sort of system for organizing your time. Everyone is different so make sure you experiment until you find something that works for you. Here are some basic things that every designer should do:

  • Keep a diary
    Keep a comprehensive diary with dates clients called, dates you need to finish designs by and so on. Refer to it everyday.
  • Write daily lists
    Everyday before you start your work spend five minutes itemizing the day. Write down everything you need to do and the order in which you need to do it. Put the most important items first, not the easiest ones.
  • Take organized breaks
    Don’t break when you feel like it, break when your schedule says so. One of the biggest differences between successful web designers and unsuccessful ones is how disciplined you are with your daily routine. Regular breaks will refresh your day, but only if you actually do work in-between

The stress of looming deadlines is horrible. It can make your work feel like a real drag and end up leaving you stressed, depressed and anxious. If you manage your time you will avoid these feelings as you will constantly reassure yourself that you are on top of all of the tasks. Organizing your time well is the first step to creating a very fruitful career.

5. Not giving your clients enough advice

This last point goes against a lot of the current wisdom out there which states that you should always do what your clients wants. Not so. Your client is not the expert. You are.

Caution Tape

The doctor and the patient example

Would you ever go to your doctor with a painful lump in your neck and then tell him/her how to do their job? No. You wouldn’t. You would listen to the advice and take it on board.

The same is true for web design.

You are the doctor, the client is the patient and the painful lump is the website that they really need to get built.

Now, one thing about the doctor and patient example that is also important to notice is that the doctor will always listen to the patient’s symptoms, feelings and fears before making a diagnosis. You need to do the same. Find out what they want, when they want it by and what they need it to do. But don’t be afraid to tell them if they are making a mistake or if there is a better “treatment” out there. For example, I will always advise my clients against a Flash website if they are trying to sell a product and rank well on Google. Almost all of the time they take the advice and their business is better off for having done so.

Again, the goal here is not to bully the client into doing what you want. Rather you are trying to do the best by them and giving them advice that you think will help them succeed. Don’t advise out of laziness. Do it to help.

Conclusion

The web design industry is a very volatile one and mistakes will be made. Do your best, however, to make sure the above five are not on your list of failures. If they are, pick up the pieces and make sure they don’t occur again. That way your mistakes become lessons and allow you to grow as a designer. After all, isn’t that what we all want?

Have you got any other mistakes to share? Remember, they might really help someone out there.

22 Jun 2009

14

Does Design Matter? Five Ugly Websites that Kill the Competition

Design is not always everything. The following five websites are proof that design is not all that it is made out to be. If you focus your time, money, and energy into creating a killer service, you will come out miles ahead of those pouring their time, money, and energy into the design of their mediocre service.

Most webmasters place a high amount of value on the design of their website. Many webmasters have even spent significant amounts of money to insure that their website design was exactly the way they wanted it. It is commonly argued that well-designed websites are one of the keys to insuring recurring traffic. If people enjoy the look of a website, they will continue to return. Yet, this is not always the case. Design is not always everything. The following five websites are proof that design is not all that it is made out to be. If you focus your time, money, and energy into creating a killer service, you will come out miles ahead of those pouring their time, money, and energy into the design of their mediocre service.

Chris Guitars

Chris Guitar’s is by far the ugliest website on this list. The official website/e-store for Chris Guitars in Albany, NY is e-commerce in its most elementary form. Chris Guitar’s is coded from top to bottom in HTML, complete with a “cheezy” graphic (albeit one that honors US troops and is therefore commendable). The website’s clashing color scheme of yellow text on a solid purple background is enough to make any shopper’s eyes bug out within the first minute of reading. Each product listing exists as a paragraph of product description and review along with a link to a picture of the item being sold.

Chris' Guitars

Don’t the the ancient design and super-simplicity fool you though. This guy does business. Chris Guitars has established itself as a sort of mecca for musicians and music equipment collectors. The simplicity of the website couple with the honest descriptions, pictures, and “best price on the web” make Chris Guitars exempt from any rule of good website design.

MMOFB Blog

The first three lines of this website tell all – “Don’t let the stunning graphics and good looks of this blog fool ya“. An obscure blogger writing under the anonymous pseudonym “Grizzly” has set out to prove that badly designed websites run by anonymous people can rake in cash. To see some of Grizzly’s handywork simple query “make money online” into Google and you will see Grizzly’s blogspot hosted website appear within the 1st three spots of the SERPs (depending on the data center you access). Rather than relying on flashy custom WordPress designs, personal branding, and name recognition Grizzly has simply focused on good SEO.

MMFB Blog

Grizzly essentially contends that good design is needless, and that webmasters should focus on producing a quality service focused on growing organically. Do you think he is dead wrong? Check the numbers: 4000+ subscribers (more than 3000 more than comparable websites with flashy designs), and daily earnings ranging from $150 to $300 (compared to maybe that much in a month from comparable “well designed” websites). While many may cringe at the design of Grizzly’s blog, Grizzly himself would probably tell you that all well designed sights should be as ugly. The design of the MMOFB blog is the result of careful ad testing and analytics. The design hinges upon where the ads are most productive. With his cult following and earnings of $1,000+ per month from a free hosted blog – I am tempted to go and dishevel things a bit more on my own websites.

Plenty of Fish

The story of Markus Frind and his online dating website PlentyOfFish.com have garnered quite a bit of media attention from high profile publications such as Inc. magazine and many others. Frind is the first to admit that a boring and poor design is what makes the free dating site such a huge success. Frind’s strategy in creating PlentyOfFish was to build it and code it as minimally as possible so that it would consume the least amount of (server) resources as possible. The most glaring piece of poor design is the lack of proportional resolution on the thumbnail version of the photos. Based on interview with Frind, the disproportional thumbnails encourage more clicks, pageviews, and time spent on the site which ultimately results in more advertising exposure. The purposeful design flaws on PlentyOfFish.com have resulted in an estimated $10M in revenue for 2008.

Plenty of Fish

Wikipedia

Consider Wikipedia the epitome of the age old internet adage “Content is King”. By focusing their community on creating excellent fact supported content Wikipedia has essentially negated the need for well designed pages. While Wikipedia does offer certain modules and graphs to express data in a more organized fashion, the tables do little to balance the overall asymmetrical contents often left poorly spaced and formatted by pictures and other related resources.

Wikipedia

Despite the relatively poor design and lack of eye appeal Wikipedia has established itself as the go-to resource for any online query, often showing up first in search engine results. The overwhelming existence of quality content and information often makes up for the lack of aestheticism, and lends itself well to the idea that academia should never be appealing to the eyes.

Google

Wait…why is the big “G” on the list? Excellent question. Google’s design may not be intrinsically ugly, but it certainly is primitive. Google, the number one most visited website in the world, also understands that success does not rest in good web design. For Google, success rests within a superior search product and other solutions. When compared to other design-centric search engines such as Bing and the content ridden search services of Yahoo! and AOL, Google begins to look a bit boring. Google’s logo set (save for the commemorative ones) remains rather unspectacular as well. However, what Google may lack in flashy logos and content management, they certainly make up for with their superior services and offerings.

Google.com

Questions and Conclusions

Five websites, five unspectacular designs. Does good design matter? Or is bad/boring/minimalist often used by designers intentionally to place a higher emphasis on the product and service. Should an excellent product or service be supported with flashy or cutting edge design? As a result of seeing these five websites, should a higher amount of energy be focused on website functionality and quality service development than on design?

One thing is for certain. Excellent products and quality design are not mutually exclusive. Excellent products can have excellent design, yet perhaps design should be one of those things that is gradually improved as time permits rather than thrust to the forefront of a project. If your website offers a quality product or a knockout service you should have no issues gaining users. The homework has already been done for you. Users care about functionality more than they do about design.

About the Author:

Ethan is a well-trained internaut who runs techsplosive.com, a website about Internet Startups and
Social Media.  If you like what Ethan has to say here, feel free to subscribe to the Techsplosive.com
RSS feed.

If you’d like to do a guest post on Webitect, feel free to contact us.

21 Jun 2009

7

10 Killer Firefox Add-ons For Web Designers and Developers

I hope it doesn’t come as a big surprise that Mozilla Firefox is easily the most desirable browser for web designers and developers, but if it does, you’re in for a quite a treat!

So why does Firefox have a firm grip on all of the internet geeks out there? The answer is quite simple – add-ons. Downloadable add-ons can make your design and/or developing experience much more efficient and fun, and while there are thousands of add-ons available for nearly any situation, there are some that are truly geared towards web designers and developers.

Below, we’ll go over 10 of the hottest add-ons for web designers and developers.

1. Web Developer 1.1.6

Without a doubt, Web Developer should be on every Firefox “top add-ons” list. I’m sure most developers reading this will nod their head in agreement when I say, “What did we do before this came out?”

Web Developer

The Web Developer add-on adds a nice menu and toolbar to Firefox that is full of wonderful web developing tools to make your life easier. Web Developer allows you to do anything from disabling certain features on a page (like JavaScript, page colors, etc…) to editing the CSS of any webpage in real time. Features like that allow you to save all sorts of time, and in the design/development world, time is most definitely money. Web Developer is an absolute must-have.

Download Web Developer

2. Firebug

Another heavy hitter in the developer’s arsenal, Firebug is another one of those add-ons that you simply can’t live without. Firebug allows you to do things like “find HTML elements buried deep in the page”, and pretty much hands over a golden plate of information at your fingertips.

With Firebug, you can edit and debug HTML, JavaScript, and CSS in real time and figure out why you’re getting that pesky error message. You can also monitor network activity (to figure out why your page is taking so long to load), visualize CSS metrics (so that you can find out why CSS boxes aren’t lining up like they should be), and so much more. There are also a ton of different extensions for Firebug that are constantly being developed.

The best way to find out what Firebug can do for you is to check out their site.

Firebug

Download Firebug

3. ColorZilla 2.0.2

This is such a handy little add-on that so many different types of users could find useful. How many times have you been on a particular site and wondered exactly what color they used for a certain text or element on their page? Probably hundreds of times, right?

Colorzilla

Now, with the click of a button you can easily grab the RGB, hex, and even get information about DOM elements on the fly. ColorZilla also gives you the ability to zoom the page and measure the distance between any two points on the page you’re viewing. That’s just awesome.

Download ColorZilla

4. ScreenGrab 0.96.1

Think about how many times in your web development life that you’ve hit the “print screen” button. Exactly. Instead of doing things the old school way, someone was smart enough to launch a free way to quickly and easily grab a screenshot of an entire page, a specific section of a page, the entire window you’re looking at, and a few other options.

Screengrab

ScreenGrab will remind you of SnagIt, only you don’t have to shell out any cash for it and it works just as well. I don’t think anyone would argue that this is another standard add-on that should be in every developer and designer’s browser.

Download ScreenGrab

5. LinkChecker 0.6.3

Even the best of the best screw up the occasional link on a page. That’s why a genius by the name of Kevin Freitas built the simple, yet very useful LinkChecker add-on for Firefox. It will check if a link is valid or not, and this is easily one of those “use every day” type of add-ons that will be another valuable tool in your collection.

Linkchecker

Below is the plugin in action, on Webitect.

Bad Link Webitect

Download LinkChecker

6. Window Resizer 1.0

Testing your new site or project in several different screen sizes is crucial to your process. This simple add-on allows you to do just that. Window Resizer supports 640×480, 800×600, 1024×768, 1280×800, 1280×1024 and 1600×1200 resolutions. Talk about convenient!

Window Resizer

Download Window Resizer

7. IE View 1.4.3

Another essential step in the design/developer process is viewing the site in different browsers. The first and most important additional browser to check your work in is Internet Explorer.

IE View was created to quickly check to see how your project appears in IE, giving you a fast way to spot any problems. Again, another very simple add-on here that can help boost your efficiency.

IEViewer

Download IE View

(Note: Similar to IE View is Safari View. This is another one worth downloading.)

8. Dummy Lipsum 2.3.0

For the thousands of times you’ve copied and pasted “Lorem Ipsum” dummy text for all of your past projects, you’ll have wished you found Dummy Lipsum a lot sooner! This awesome add-on is a no-brainer for any designer or developer.

With a few clicks, you can easily generate a page full of space filler text, and you even have the option of including punctuation, showing or not showing html tags, and whether you want to start it with the infamous “Lorem ipsum dolor sit amet…” You can also have it generate the text in the form of a paragraph, words, bytes, or even a list!

Dummy Lipsum

Download Dummy Lipsum

9. HTML Validator 0.8.5.6

Instead of using a separate tool or website to validate HTML on a page, you can download this nifty little add-on which adds HTML validation inside of Firefox.

HTML Validator shows you the number of errors of a HTML page seen in an icon on the status bar when you’re browsing, which makes the process of spotting errors extremely fast and easy. While some other add-ons include this already, this is a nice hands free way to spot errors on the fly.

HTML Validator

Download HTML Validator

10. MeasureIt 0.3.8

I’m sure there have been countless times where you quickly needed the measurements of how large an image was, or how many thumbnails you could fit into one box, etc…

With MeasureIt, you can quickly and easily draw out a ruler to get the measurement (in pixels, width and height) of anything on a webpage. MeasureIt is another awesome tool for any designer to add to their Firefox browser, as it will surely speed up the process.

MeasureIt

Download MeasureIt

Wrapping Up

10 super efficient Firefox add-ons that should allow you to shave some time off of your many projects. I know there is a mess of additional helpful add-ons for designers and developers, but the 10 above are the ones that seem to be the staples among the thousands of others available.

Here are five more add-ons worth mentioning (just in case you can’t get enough):

  1. FireFTP – Instead of opening an external FTP for site updates, this is easier.
  2. Font Finder – Quickly show all the properties of selected text on a page.
  3. Colorblind Simulator – Experimental add-on that simulates what a page looks like to colorblind people. Since 10% of the population is colorblind, this is smart!
  4. SEOQuake – SEO is fundamental, so why not have a little help?
  5. Greasemonkey – Extremely popular add-on that allows you to run custom JavaScript against any webpage.

18 Jun 2009

6

Easy Photoshop Tutorials for Realistic Things

A Scrap Of Notebook Paper

A scrap of notebook paperThis is a common trick on realistic space web designs featuring offices or work spaces. The tutorial itself is incredibly detailed, but also leaves room for your own creativity.

Created over as PSHero, this tutorial is perfect for beginners to really learn something useful in Photoshop, by creating something as specific as this paper, but also picking up vital Photoshop techniques along the way.

In the tutorial, the “Hero” goes over how to properly prepare an image like this for the web, so it can look high-quality and as real as it gets. Image preparation is something that ever designer needs to know, and this tutorial example is a great overview.

Go make your own scrap of notebook paper now.

Political Campaign Button

Promotional ButonWho needs a printing company for promotion when you just have Photoshop? This stylish button is another of PSHero’s great tutorials. Easy for beginners, but advanced and unique enough for any Photoshop user level.

While this button represents a political button for a typical campaign in America, the process is transferable for any colors and shapes — and can be created with any style of flag, symbol, or image.

This tutorial was made with a single set of layer styles, making it a simple and quick process–a great addition to any page or web design.

Go create a political campaign button now.

Old World Wax Seal

Old World Wax SealThis tutorial is great for designs with an old, and even grungy feel. Even though it’s grungy, it also has a classic look.

This tutorial uses few layers and the pen tool. The pen tool in Photoshop is often the toughest tool to use for Photoshop beginners, and this simple wax seal is a great way to get step-by-step practice.

This tutorial is also easily customizable, and you can find your own image to embed in the center, along with your own color scheme. For the rest of the background, PSHero offers great graphic design tutorials for creating paper textures.

Go create a realistic old world wax seal now.

Custom Hang Tag

Custom Hang TagThis type of image is becoming very popular in web design, and PSHero shows you exactly how to do it. Hang it in the corner of a web design to place a logo, or declare a special or update.

The great thing about this tutorial is some of the techniques used in it. This is a tutorial that shows how PSHero takes a basic template from a real life object. This technique can be used in other aspects for any designer who would like to create their own custom Photoshop pieces.

The tutorial is customizable with your own logo or text, so whether it be just for practice, or to actually use the tag in a design, it’s a great tutorial to reference.

Go create a custom hang tag now.

Craft a Vintage Fifties Letter

Craft a Vintage Fifties LetterVintage and grungy are two popular design trends right now, so this type of tutorial is quite popular. Create a vintage 50′s letter, with custom text for your own design.

This tutorial covers many of Photoshop’s need-to-know features: brushes, shape tools, layer styles, blend modes, along with some intermediate techniques. It is easy to follow, yet provides advanced technique for those wishing to take their Photoshop skills to the next level.

The texture in this tutorial is beyond amazing for a computer document; just take a close-up view at the final result on the tutorial page. Because it produces such high-quality, the outcome of this tutorial could be used for many different things, not just in web design.

Go craft a vintage fifties letter now.

Create a Realistic Blueprint Image From a 3D Object

Create a Realistic Blueprint Image From a 3D ObjectPhotoshop’s 3D feature is often overlooked in the world of graphic design, but this tutorial shows a perfect example of how to use it to create a stunning blueprint image.

This tutorial also goes over how to place the created blueprint image in a real setting (this example being the table and surrounding area), and adapting the blueprint image to the environment.

This tutorial is easy for beginners to follow, yet it uses a lot of the tools I had to use in my advanced Photoshop class. Getting through this tutorial and learning the techniques will increase almost anyone’s Photoshop skills.

Go create a realistic blueprint image from a 3D object now.

Creating a CD PLayer

CD PlayerI figure there’s enough Photoshop tutorials for creating iPods and other modern day mp3 players, but why not relive the 90′s?

This Photoshop tutorial is image heavy and very easy to follow. With a CD player being a common object laying around, this would be a great classic addition for a realistic space web design of a bedroom or office space.

For Photoshop beginners, this tutorial is great for practice with gradients and other techniques of adding depth to an image.

Go create a realistic CD player now.

How to Make Real Compact Disc

Realistic CD PhotoshopTo go along with our realistic CD player, we need a realistic CD. As you can see, this tutorial uses similar lighting effects as the vinyl record below.

This tutorial is easy to follow and will go over a bit of transparency/blending modes, filters, lighting effects, and the transformation tool. Great technique for advanced users to learn, and great for beginners needing an step-by-step introduction to some of these Photoshop features.

This would be a really cool and realistic addition to a web design with a realistic space.

Go create a realistic compact disc now.

Creating a Vinyl Record In Photoshop

Vinyl Record PhotoshopLet’s go back in time a bit more and create a vinyl record in Photoshop.

The great thing about this tutorial is that it uses a few filters, so anyone unfamiliar with them can get some practice. Even for those who aren’t new to Photoshop, a new use of some of the filters is a greatly appreciated technique.

Included in the tutorial is also some other great techniques for texture and lighting. They are specific to the tutorial, but knowledge of them can be easily transferred to other realistic objects created in Photoshop.

This tutorial is a great option for vintage or retro web designs.

Go create a vinyl record now.

Create a Realistic Outer Space Scene

 Create a Realistic Outer Space SceneThis one’s pretty cool: a realistic outer space seen in Photoshop. This tutorial does not use any image references — just Photoshop filters, lighting effects, and blending modes.

Because it only uses Photoshop, it is great for the ultimate customization from the designer. With this tutorial, a designer can create a scene specific to their own design needs.

This tutorial is great for any Photoshop user that would like a better understanding, or learn new techniques, for filters and blend modes.

Go create a realistic outer space scene now.

13 Jun 2009

7

75 Websites with the Best Typography

http://www.alistapart.com/

http://ilovetypography.com

http://www.shauninman.com/pact/

http://www.tanoshism.com

http://www.jrvelasco.com/

http://www.fontshop.com/fonts/

http://www.andyrutledge.com/

http://www.bearskinrug.co.uk/_store/

http://www.rikcatindustries.com/

http://www.underconsideration.com/quipsologies/

http://www.ff0000.com/

http://designsnips.com/

http://thebignoob.com/

http://www.processtypefoundry.com/

http://www.designcanchange.org

http://www.getfinch.com/

181

http://sr28.com/

http://jasonsantamaria.com/

http://events.carsonified.com/fowa/2009/miami/content

http://www.elysiumburns.com/

http://www.viget.com/inspire/

http://diaroogle.com/

http://www.themorningnews.org/

http://orderedlist.com/

http://www.wordsarepictures.co.uk/

http://owltastic.com/

http://www.blackestate.co.nz/

http://www.newyorker.com/

http://www.adfed.org/

http://www.whatalovelyname.com/

http://rustinjessen.com/

http://jontangerine.com/

http://www.thedarlingtree.com/

http://www.shauninman.com/blog

http://www.aneventapart.com/

http://decknetwork.net/

http://gr0w.com/

http://thenetsetter.com/blog/

http://www.pallian.com/

http://www.sushiandrobots.com/

http://legistyles.com/

http://benlind.com/

http://www.typechart.com/

http://www.loremipsum.ro/

http://www.crowleywebb.com/

http://astheria.com/

http://www.alpha-multimedia.com/

http://typedeskref.com/

http://madebygiant.com/

http://blog.fl-2.com/

http://www.cucweb.org/

http://adamglenn.com/

http://www.sergionoviello.com/

http://lhmdesign.com/

http://www.bigomaha.com/

http://forabeautifulweb.com/

http://www.jonbrousseau.com/

http://www.oneshareinvestments.com/

http://mattyblaw.com/

http://csswizardry.com/iamharryroberts.com/

http://www.383project.com/

http://www.works4sure.nl/

http://www.linksla.com/

http://junecloud.com/

http://oddwebthings.com/

http://designr.it/

http://bradfrostweb.com/

http://www.area17.com/

http://www.fontex.org/

http://joelongstreet.com/

http://squaredeye.com/

http://www.arqandgraph.com/

http://www.objectifiedfilm.com/

http://new.typographica.org/

10 Jun 2009

6

Dark vs. Light Design: Does it really matter?

I can see many readers thinking, “Why would it matter? Light or dark design is just a designer’s personal preference, right?” It’s easy to think this, but dark and light design are world’s apart. Also, with the rising trend of dark website design, a closer look into the differences is needed.

Why Use Light Design?

Let’s analyze light design first. This is dark text on a light background, a very common type of web design. Using light design is also an easy way for a designer to come out with something boring.

Light Web Design

What happened to the importance of readability everyone? A website that needs to accommodate a large audience should always use a lighter design. This is because light design is, by far, the most legible type of design.

When the screen emits more light, it’s easier to see the text — just as you can see more during the day rather than the night. Seems like a silly thing for our brain to do, but it’s undeniably true. I could go into the science behind this phenomenon, but I’ll just Jonathon Snook from Snook.ca explain:

“But the outcry against black could be heard amongst the crowd. “Hard to read”, they say. I’ve been looking at this design most evenings for a couple months now and actually found it comfortable on the eyes. Why is that? And then it dawned on me…I was always looking at the design in the evening, often working in the dark. Looking at it during the daytime with the bright sun beaming in, I actually found myself preferring the contrast mode on.” – Reboot: Light vs. Dark

When our eyes are adjusted to the dark, it’s easier to see a dark web design. However, most readers probably aren’t sitting in the dark every time they view a web page!

Dark Design

Ok, so I think the point’s been made about readability. So what’s the big deal about dark web design? It’s purely aesthetics. Most experienced web designers will scream usability over design any day, but lets consider dark design a bit closer.

Joystik

To really determine if you should try out dark design, we need to answer the question, “How important are aesthetics?”

Well, they say content is king, but design is the queen. —and who says the queen can’t be of equal status? When it comes down to it, design sets a mood for he visitor. If there is bad design, the visitor won’t trust the website. If there is unprofessional design (even if it’s pretty to look at), the visitor surely won’t invest anything into it, whether it be time, a registration, or buying a product.

What is the mood-setting difference between dark and light design though? This is how dark design can be a powerful thing. The following moods can be portrayed from dark website design:

  • Creativity, “Out of the Box”
  • “New”, contemporary
  • Sleek/Web 2.0
  • Mysterious

An excellent example to use dark web design would be a web design portfolio. Creativity is obviously something that needs to be displayed, and at the same time most designers want to display themselves as contemporary and new — a person that would think outside of the box.

The Big Debate

Darren from Problogger did a poll on this topic, and just to see how many people actually preferred light backgrounds, below are the results he came up with.

Problogger's Study

Note that this image is credited to Darren of Problogger.net

As you can see, most viewers prefer light backgrounds with dark text. However, a large chunk of this population also says it depends on the blog. Below are some of the comments made by the voters.

“I have had 4 different templates running on my website. Light, medium and two dark versions.

In my experience on this particular site the dark versions out perform the lighter ones about 3 to 1 in Adword clickthroughs.

I think it greatly depends on your blogs topic though. With mine being on the “The Secret” dark is more mysterious, so dark fits the topic better. IMHO

Overall, for reading I prefer lighter versions.” – Ron

“I prefer lighter backgrounds for research but It depends on the subject matter. Really dark backgrounds put me off especially if the text is gray. Overall lighter backgrounds give out a clearer call to action and the graphics stand our better for me. I do like to see contrasting colours too and a bit of individuality.” – Bill Masson

“White is good for all professional web pages and dark equally good for all recreational web pages, i.e. entertainment, the arts, leisure, travel, the holidays, hobbies.” – GameDaddy

“What people say they like and what they actually like can still differ greatly.

It’s not about what your visitors like, it’s about what converts best for your goals (more visitors, more mail/rss subscribers, more sales, twitter followers, etc.)”

Wrapping Up

In one of my next posts I’ll be speaking about how to achieve a more legible dark background website. So for those that think they would benefit, or just prefer dark backgrounds, keep checking back. You may also be interested in the two articles I found below.

Do you prefer light or dark websites? What are you basing your reasoning on?

08 Jun 2009

3

5 Techniques that Will Take your Design to the Next Level

1. Add Gradients

Gradients can add a lot to web design without overpowering it. They also add depth and a modern appeal. Gradients can come in a variety of forms, too.

Centraol Snowsports

The example above uses gradients all over the place. From the top bar, to the logo, and throughout the various types of content. As you can see, there are different variations of gradient too. The gradients with the deepest contrast (Fallscreek, Hotham, and Hakuba) create a place for the eyes to focus.

Viget

Gradients can b added very subtly too. The above design is far from a sleek style, but gradients are still present in the logo and site title, and in various icons throughout the design.

Owltastic

This illustrative design uses slight gradients throughout the illustration, and adds detail with gradients to the navigation and various icons.

2. Add Lighting Effects

A technique that is sometimes similar to gradients is lighting effects. Glowing, spotlight, or other lighting effects can have a significant impact on the overall design. Again, lighting effects add depth and visual appeal, but with a bit more pizazz. These effects are often times the main feature, or highlight the main feature, in the overall design.

Atebits

The above design features various gradients, but a main thing you’ll notice is the ‘shine’ effect in the background. Two simple gradients, and this line have created a very realistic look for this website. On top of that, similar lighting effects were used in the featured icons.

Icebrrg

As one can see, the main lighting effect resembles an underwater scene, and can be related to the site title. That lighting effect is complimented with the semi-transparent content area. Also notice the slight lighting effect to the logo design. Adding subtle lighting effects on top of the main effect can add a lot of appeal as well.

N.Design Studio

The background lighting effects are obviously not the only feature making this design amazing. It is a great example, though, of how lighting effects can add to any part of the design– whether it be the whole design, a logo, or in this example, an illustration. Nick La’s post, Vector Polishing Techniques, goes over these various techniques that he has become famous for, many of them being lighting techniques.

3. Use Image Detail

Many designers will create a main header or background image, and close down Photoshop for the rest of the design process. This is a huge mistake. Adding small image details to buttons, headers, and specific content areas can add a lot of detail to a design, creating more appeal and focus.

African Budget Safaris

The travel website above uses image detail in various spots. For example, the navigation, menu background, borders, and even the submit button for the the search bar.

Multiways

The above is a great example of how blog design can benefit from extra detail. The design above features a lot of whitespace and is very simplistic. The extra detail on the post date, comment icon, and color added to the active navigation element in the above screenshot already adds so much. If you visit the site, you will also notice details in the search bar, other navigation elements, etc.

Studio Kreatywne Synergia

This design adds image detail to the headers, a very common and effective trick when using this technique. One will also notice icons and unique borders used throughout the design. The footer border is also very colorful, creating a great separation point.

4. Declutter and Add Whitespace

This doesn’t necessarily mean every design should resort to the minimalistic style. Any design style should pay attention to the amount of whitespace present in the design. Also decluttering or removing any content or elements that are not needed in the design will help bring attention to the elements that are really needed– as well as leave more room for whitespace.

Healogix Marketing Research

The extra spacing throughout the design aid in the visual hierarchy. One of the first components the visitor’s eyes are lead to is the navigation area. This area has a significant amount of whitespace around it. As I stated in A Guide to Simplistic Web Design, whitespace frames whatever it is around, and adds focus to the internal elements.

Blue Dot Design

Be sure to consider spacing between the large, main components in the design as well. Drastic spacing between the content, logo, and navigation bar remind the visitor that they are separate entities, and allow the visitor to focus on each individually.

ZURB

For websites that require a lot of content on the front page, even when decluttered, a smart use of spacing between paragraphs, headers, and images can create a content-heavy site that doesn’t look too busy.

5. Add Dynamic Effects

Most websites aren’t ready to enter the world of 100% flash, but adding smaller dynamic effects with, for example, jQuery, can create a sense of professionalism and aesthetic appeal that is bound to amaze.

There are a number of ways a designer can add a dyamic feel to a design, but because JavaScript is the most common way to do this, here are a few well-known techniques that are used.

jQuery Tabs

jQuery Tabs

Carousels

Carousels

Flash-like Menus

JavaScript Menu Navigation

Lightboxes

JavaScript Lightbox

Fancy Forms

Slide down contact form

What are some of your techniques?

Please share some of your own techniques with design, or share if any of the above techniques helped you out!

Page 10 of 14« First...89101112...Last »