Archive

Posts Tagged ‘Website Design’

HTML 5 Parser Lands In Gecko

July 11th, 2009 No comments

John Resig has blogged about HTML 5 parsing and the news that Henri Sivonen (the chap who did the HTML 5 validator) has landed a massive commit to the trunk of Firefox that includes an HTML 5 parser.

The method is quite interesting:

    What’s interesting about this particular implementation is that it’s actually an automated conversion of Henri’s Java HTML 5 parser to C++. This conversion happens automatically and changes will be pushed upstream to the Mozilla codebase.

    Normally I would balk at the mention of a wholesale, programmatic, conversion of a Java codebase over to C++ but the results have been very surprising: A 3% boost in pageload performance.  

  And this is on top of the litany of bug fixes and compliance checks that this code base will be providing. You can examine some of the progress that went into the constructing the patch in the Mozilla bug.

   If you’re interested in giving the new parser a try (it’s doubtful that you’ll see many obvious changes – but any help in hunting down bugs would be appreciated) you can download a nightly of Firefox, open about:config, and set html5.enable to true.

For extra fun, throw in some inline SVG and see it just work! Bye bye namespaces!

Pithy HTML5/XHTML comments

Dan Morill (Android and formerly GWT fame and al-round good guy) had some funny remarks on the XHTML/HTML5 kerfuffle:

    An exercise: I can easily summarize HTML5 in a single Tweet. I can’t think of a way to do that for XHTML. “HTML5 codifies existing behaviors and is a practitioner’s roadmap for the future of browser capabilities.”

    This “death of XHTML” meme is awesome, it’s soooo easy to bust out with pithy zingers. 

   Here’s one: “The web *itself* is content soup, why should we expect HTML to be more than tag soup?” 

   Another: “XHTML was the Edsel of the web: painstakingly designed, proudly touted, and utterly missing the point.”   

“They finally closed the tag on XHTML, and now the web is validated.”

Great Designers Steal?

July 6th, 2009 No comments

You often hear designers say, “Good designers copy. Great designers steal.”

Well, anyone who says this is one of three types of designers:

One who copies, one who steals or one who admits that not copying and stealing is hard but still tries not to anyway.

For some reason, a lot of web designers believe that there’s nothing truly unique left to create and that there is no such thing as originality.

I disagree, or at least I don’t want to accept that notion. You shouldn’t either.

SG_500x80_200903

Designers who copy

These people are at the bottom of the design pyramid, which isn’t necessarily a bad thing. You have to start somewhere.

Designers who copy are novices who haven’t yet grasped what makes a great design great, and so they imitate.

They frequent web galleries, pick a site they like and find a way to recreate and adapt it to the project at hand. This is how anyone learns anything. In fact, this is how we learn to, among other things, walk and talk as babies. We imitate to build a foundation of experience.

My very first website was a fan site for the anime Dragon Ball Z, which I loved as a kid. In the process of creating this site, I taught myself HTML by copying the code from another Dragon Ball Z site that I liked.

I literally copied and pasted all of the code, but then I went through it line by line, learning what each tag did. By the time I designed my next site, I was able not only to understand code but to create my own code from scratch.

Designers who steal

These are, of course, the people who say, “Good designers copy. Great designers steal.” Filmmaker Jim Jarmusch once said:

“Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light, and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And don’t bother concealing your thievery; celebrate it if you feel like it.”

This sums up these burglars well. Once a designer has copied another’s design and feel they have a grasp of what makes a great design great, their natural inclination is to go and create their own great and unique design.

But they soon discover that doing that is not as easy as the other designer made it seem. They learn that the dirty secret of many great designers is that they steal.

In design, to steal is to take inspiration from other people’s work. Designers who steal may frequent online design galleries, like designers who copy, but they know how to hide their sources.

“The secret to creativity is knowing how to hide your sources.” —Albert Einstein


They take only pieces of sites or just the overall concept or theme of something. In 2003, designer Cameron Moll wrote an article titled  “Good Designers Copy, Great Designers Steal” in which he shows the source of a logo he created.

web_images2

Moll explains:

“The chances of someone else having used this particular piece of clip art were very slim. And the chances of the intended audience — or anyone else, for that matter — being familiar with such a piece were even slimmer. Translation? A perfect source for stealing.”

Designers who try not to copy or steal

It’s a fact that we can’t help but be influenced by our surroundings. Designers steal all the time without realizing it.

A designer may look at the curvy lines of Moll’s logo above and months later may create a logo very similar to it without actually recalling where they got the idea from.

Designers in this category are aware of this habit. They know that creating something truly unique is almost impossible, but they try anyway.

To try, they may start by looking at online print galleries, instead of web galleries. They may also begin looking at package design, architecture, photography, nature—anything but web design—in an attempt to be authentically inspired rather than simply steal.

They look not just for design that works but rather for ways to make designs better.

After walking around a park in search of inspiration for a blog on nature, a designer may find him or herself using images of grass and soil to dress up the footer of the site to look like ground. They might add some birds to the header.

Or, after sitting on a bench and noticing the relationship between foreground and background, they might play around with the user’s sense of perception.

The further a designer who seeks inspiration moves away from web design, the more likely their designs will turn out truly original.

To sum up…

The pursuit of originality on the web is not a lost cause. The web industry is still young, and some things have yet to be attempted.

Once you understand the basics of design, try to think outside the box, and try new and different things. Be atypical and unique. Experiment. Don’t be afraid to design from the heart. But keep this in mind:

“Things which are different in order to be different are seldom better, but that which is made to be better is almost always different.” —Dieter Rams

In our striving to be unique and original, trying different things for their own sake is okay because they could potentially lead to better things. It’s a lot like throwing darts at a target blindfolded. You may never hit the target, but you just might learn something in the process. But do try hard to make something better than just different.

Not too long ago, people thought the Earth was flat and the center of the universe. Not too long ago, either, designers used the <blink> tag and used tables to build websites.

Theories and conventions are always being questioned, challenged and broken, and they should. If you believe a better way is possible, you will often find your way to it.

“The most innovative designers consciously reject the standard option box and cultivate an appetite for thinking wrong.” —Marty Neumeier

Twenty Five Impressive Portfolio Web Designs

July 3rd, 2009 No comments

30-01_45royale

Portfolios are a great way for web designers to show off their work and present to prospective employers what they can do. But with so many portfolios out there, it is hard to make yours stand out from rest.

In this showcase, you will see a few excellent examples of beautiful web designs which we hope will help inspire you.

Tips to Succeed with Adsense

July 1st, 2009 No comments

As you use Google’s AdSense for more and more time you begin to learn from the mistakes of the past, and you slowly begin to realize which of your actions kept your site from reaching its full potential.

But an important part to making a mistake is telling people about it and teaching them how to avoid making the same mistake. So this is a list of the top five mistakes people using AdSense make.

You should read them well, and see if any of them is applicable to your contents. If it is, you must stop and attempt to fix such errors as quickly as possible.

The first major no-no that everyone seems to be hitting at one point or another has to do with breaking the rules. Google’s AdSense is a great program but it relies on you respecting a few set rules.

The most important thing is not to create “artificial clicks” through any means possible. Never click your own links, never ask your friends or close ones to click the links and never, by any means have your content encouraging the visitors to click the links. You run the risk of being permanently banned, and that will definitely damage your revenue.

Failing to comply with Google’s terms could have your AdSense account suspended. And this is why this rule is by all means the most important one of all. It’s because this is the difference between life or death.

The second thing users get wrong a lot of time is having a bad color palette for ads. Many times this happens because the publishers aren’t knowledgeable enough to change default color palettes.

Others just can’t seem to spend enough time in changing those defaults. Having bad ads that stand out is sure to push people away from clicking; whilst having something which is clearly visible yet distinctive will.

Third, of course, the position of the ads is probably the key element you should get right if you want to maximize your profits with AdSense. This is noted in a lot of places on the web and Google talks about this as well. Google can provide you with statistics which illustrate what positions work particularly well on your website.

Fourthly, banner ads are also a very bad idea if you’re using AdSense. 480×60 type ads are a sure way to drive many people away as most Internet surfers have developed a natural resistance to such means of advertising.

And last, but clearly not least, is not taking care of the site running the ads. Because ultimately it doesn’t matter how cool the site is itself. If it doesn’t have updated contents and a lot of daily visitors it will probably never earn you any serious AdSense revenues.

So these are the most important five things people get wrong while using the AdSense program. But of course if you don’t like this means of expressing the issues, here are the top five things you should do to ensure your AdSense ads are constantly bringing in that revenue.

Never break Google’s policy. Don’t make visitors create “artificial clicks” on your website regardless of the person doing so or the reason. Make sure your ads have the right colors that blend in with your site, and make sure they’re positioned in the right places to attract as many customers as possible. Always try to avoid using banner-like (480×60) adds unless you really know what you’re doing and constantly keep your site fresh and up to date.

So with that in mind you should be raising your AdSense revenues in no time.

Bit o’ Eye Candy

June 9th, 2009 No comments

’m in a pretty good mood, so here is a bit o’ eye candy to indulge in 😉 Click links to be taken to sources.

justin-maller

luxury-brisbane-home

 

 

waitrose-honey

Leon Poster

leon

lettering

rough

Categories: Website Design Tags: , ,

8 Web Design Tactics to Help You When You’re Stuck

June 5th, 2009 No comments

Web design can be incredibly frustrating.  You’d think that with the infinite possibilities of what-goes-where it’d be pretty easy to land a design that works, yet somehow we’ve all been stuck before: working hour after hour on a design that refuses to look right.  Throwing away pixels like they’re going out of style.    stuck(1)

These 8 tactics are what I use to get out of that sticky spot.

  1. Design from the inside out 
    This is some of the best advice anyone ever gave me about web design (thanks Cameron).  A lot of designers start off a design by focusing on the header.  Often times what’s inside the page is what makes it look good; the header is supplementary.  Try leaving the header alone for awhile and working on some elements in the body, you’ll be surprised at how much easier it is to design a page once you’ve got a solid body going.  The next time you’re designing a header with no body imagine yourself adjusting a tie in front of the mirror, but being completely nude.   (yikes)
  2. Sketch something
    My whiteboard is my salvation.  Pencil and paper works too.   I read an article years ago by a designer who would draw dozens of little 2×3" mockups in his spiral notebook before even opening up a graphic design program.  It helped him identify where elements were going to be placed and what options looked best .  The best part of creating mockups this way is the speed at which you can burn through possible layout ideas.  Sketch something, scribble it out.  Sketch something else, scribble it out.  Do this ten times and you’ve probably got a fairly decent idea of how to the page should come together.  I’ve used a few wireframe applications like Axure, but I’ve still found myself to be my most efficient while bathed in the saucy aroma of whiteboard markers.
  3. Seek inspiration offline
    If you’ve paid attention to anything design related in the past two years then you’ve no doubt seen a few of the countless CSS galleries and design showcase websites that popped up.  These are excellent sources of inspiration, but sometimes a bit of offline media can be just what you need to spur some fresh ideas.   Open up a newspaper or magazine, go to the grocery store and look at the packaging, watch a television ad.   Pay attention to things that are applicable to your design such as typography, color, and element placement.  Ask yourself questions like "What is it I like about this magazine ad?" and "What is about this packaging that just works?"  There’s a lot you can learn from observing traditional media.  A few years ago a co-worker of mine lent me a book full of Russian posters and print ads from the 1920’s.  The lessons learned from looking at some of the material were invaluable – I was particularly impressed by how they were able to cram a ton of information into a tiny area but kept it from appearing too "busy."
  4. Learn to let it go
    Ever make a button that looks ridiculously awesome but just doesn’t belong in your design?  You put so much effort into your ridiculously awesome button, you’ll go to great lengths to make it work.  You’ll bend the laws of space and time to make that goddamn button look right in your page.
    Learn to let it go.  Save the button and file it away.   Although you’ve lost this battle, you’ll soon have an arsenal of ridiculously awesome buttons you can use in designs later on.
  5. Step away from the computer
    We’ve all heard this before: If you’re having a difficult time with something, leave it alone for awhile and come back later.  It’ll probably be easier after you’ve had a bit of a break and your mind has settled.  Regarding web design, I’ve noticed this always plays out in a certain way:  If I’m hating a design I’m working on and I shelve it for a few days,  a lot of the time my reaction upon returning will be "Holy crap that’s fantastic!"   On the flip-side, I’ll often toil away long into the night working on what looks like the best design I’ve ever created.  The next morning I’ll look at it again and cringe at the horrible abomination I’ve created.    The moral here is to give your design some space.
  6. Be absorbent
    No art is born in a vacuum.  Learn to effectively pinpoint what it is you love about other designer’s work and incorporate it into your own.    Don’t steal designs, but don’t deprive yourself of external stimuli either.  Become better at identifying why you love the way something looks.   When I come across a design that blows my mind, I try to pick it apart what aesthetically makes it tick.
    The Tangerine Tree is a good example.  Sure, it looks wonderful, but why?  Personally, I love the way the designer has taken a very modern set of shapes and applied them against a vintage medium: Cartoonish bubbles and clouds that appear to be cut out of distressed paper.  When looking at this design I ask myself: What could I do with textures like that?  What is it about those shapes and icons that look so remarkable?
  7. Don’t be a one-hit-wonder
    Try to avoid using the same techniques over and over again, even if you’ve done really well with them in the past.  Gradient rectangles are my crutch – I have a terrible habit of using them whenever I feel like a design isn’t working.  "This design sucks…I’ll add a rectangle with a gradient fill!"  The result is usually something that I’m unhappy with because it looks the same as all my previous work.  Try imposing yourself with silly rules, such as "No drop shadows today" or  "2D elements ONLY."  Locking yourself out from certain design habits forces you to learn new ones.   My happiness as a designer coincides with my ability to produce something that looks great but is different from anything I’ve done before. 
  8. Seek input from others
    This is a tricky one.  There are so many ways to ruin a web design, especially when the wrong kinds of people are involved.  Be careful who you ask and find people who can provide constructive criticism.  I’ve seen many great designs die at the hands of aesthetically-challenged secretaries who have printed a few corporate bake-sale flyers in the past and consider themselves to EXPERTS at all things design.  If anyone ever tells you that your design doesn’t "feel right," or that they "just don’t like it," you might want to look elsewhere for input.  Find someone who can tell you specifically what’s wrong and how it could be improved.   Grow some thick skin, too. Don’t assume every criticism is an attack on your work of art.    Roll with the punches.

The Best Links Of The Day 02/06/09

June 2nd, 2009 No comments

http

There’s something for everyone in today’s summary. Developers might want to look out for the regular expression tutorials and the wordpress plugin guide. Designers will want to check out the tutorials. So which ever category you fall into be sure to have a look!

Essential Guide To Regular Expressions: Tools and Tutorials via Smashing Magazine

Design a Layout for a Non-Profit Organization in Photoshop via Design M.ag

13 Beautifully Designed Mac and iPhone App Websites via Web Design Ledger

Getting Started Writing WordPress Plugins via Fuel Your Coding

9 Online To-Do Lists For A More Productive Day via List fied

Just Get Going: The Single Most Effective Marketing Trick via Freelance Switch

How to Create a Fun, Illustrated Skateboard Design via Vectortuts

How to Create a Moka Express Icon via PSDtuts

The Ten Types of Freelancers: Which One Are You? via Freelance Folder

Categories: Website Design Tags: , ,

City skylines vectors

May 21st, 2009 No comments

Vectors

The first Designer Daily newsletter has been sent today, and it contained the pack you see up here as a gift. Make sure you subscribe by leaving a comment with the subscription box checked, or in the sidebar. Don’t forget about the free animal vectors that you can get by subscribing to the feed.

This pack is a set of 10 famous cities’ skyline saved as Adobe Illustrator 10 document (Zipped file: 2Mo)
Cities included: Berlin – Chicago – Jerusalem – London – New York – San Francisco – Prague – Shanghai – Moscow – Sydney

Web Design Inspiration from 35 Korean Flash Websites

May 16th, 2009 No comments

The Design Inspiration has published an article of Top 35 Inspirational Korean Websites. As a web designer, we would like to design something that really standout. By doing that, we need to widen our eyes by looking at different kind of design style, so that we can get infinity and variety of inspiration.

Oriental websites and European websites are so different, because the designers have different culture and experience. You should be very familiar with US and European design style by now. It is a good idea to get some inspiration from Korean style websites as well.

inspirational-websites

Simplicity in web design

May 6th, 2009 No comments

When browsing the web on a daily basis you may come across a website or two that is extremely functional, easy to use, to the point, and visually appealing. Why are there only a few of these sites out there? Because the people that create them understand the key to web design and the key to customers, or viewers. Simplicity is the key. Yes, web design allows us to express ourselves through code and graphics. However, being over expressive and going far beyond what the web site needs actually hurts the web site in general.

An elite graphic designer may ask – How so? More graphics = longer load time is how. Ever sit and wait for a web page to load? We want them to be on our screen fast! Your viewers don’t have time to sit there waiting and waiting for your site to load. So make it easy on them so they keep coming back. Optimize the amount of graphic detail you need. This includes flash and even scripts too. Go through your HTML code, and make sure you aren’t cluttering it up with things that are unnecessary.

Once your site it optimized for easy viewing and browsing, think about the content that you are presenting. Is your site user friendly? Does it encourage feedback, interaction, etc? An easy way to keep traffic interested in your site is by adding a simple poll or perhaps a comment box. Something that makes the viewer feel as if they are important. Make your written content easy to read and understand. A confused customer is a lost customer

Browser compatibility is a big issue nowadays, with so many new free browsers available to download. What you want to keep in mind however are the big name browsers. If your site is compatible with internet explorer and mozilla firefox, you should be OK. Two other big name browsers that are used by a lot of people however are Opera and Netscape. You may want to take those browsers into account when making your site compatible and easy to access from a variety of platforms.

Last but not least one of the often overlooked parts of a web site is the mission statement, or detail of what the company or website provides. Often I look at company websites and the mission statements, or greetings are stale and boring. I lose interest in the web site even before I reach the second page of content. That’s not a good sign. In order for your viewers to understand your website and your ideas you have to communicate with them. Your goals should be explicit and easy to comprehend. They should be simple and appealing. This is really the part of the website that hooks the user and lets them know that your website is legit, as are your intentions.

Categories: Website Design Tags: ,