10 Ideas for Creating Innovative and Unique Web Designs

Jan 13 2011 by Jason Gross | 68 Comments

10 Ideas for Creating Innovative and Unique Web Designs

I am a big fan of Twitter. I consider it the one tool that helped me develop from a person who simply knew how to make websites to a web designer because the exposure to fantastic designers, tutorials, recommended readings, and impressive examples helped me build my design toolset and grow my abilities on both a technical and creative level.

So whenever someone asks my advice on how to become a better designer, things such as social networks (like Twitter and Facebook), design galleries and RSS feeds are at the top of my list of things that you should be using to learn and improve.

With that said, I think it is important that we take all of these things in moderation and limit our consumption of design tutorials and sources of "inspiration". While all of this is a great method for keeping up with the design community and making sure you’re using the latest and greatest methods and standards, I find it a poor formula for sparking true creativity and innovation.

I find an increasing discomfort with the idea of starting a project — be it a personal or professional one — by looking at what other designers have done. Looking at how your problem has been solved before in order to come up with a solution is probably a good idea, but here is the problem, though: we aren’t mathematicians, we are called upon as a source of creativity and asked to produce beautiful and unique experiences.

I believe that most designers do strive to be unique individuals. I believe we always attempt to produce new and exciting results to share with this great community. If this is truly the goal, then we mustn’t be afraid to produce bad results. By bad results, I mean terrible, terrible, awful web designs that should never see the light of day. In order to learn, grow, and innovate, we mustn’t be afraid to fail often and fail early.

There are a few things you can do to help you reach this place of experimentation and out-of-the-box thinking; this article shares a few of them.

1. Start with a Blank Canvas

Starting with another design or any portion of work that you have done before is a great way to save time on a project. In reality, a lot of unused design work can be reworked and recycled into new projects, increasing your productivity. This is a practice I encourage as it saves a huge amount of time and pulls what might have been a great idea that didn’t click on a previous project out of the trash bin. But this is not a great way to come up with that cool new design that is going to set the world on fire.

Start with a blank canvas. Don’t even set the background color to white (which is the default in many popular web design graphic editors such as Photoshop); you may not know if that’s the color you want to go with yet. Try not to restrain yourself to starting at the top of the page layout (the header) or starting with a wireframe layout (if you already don’t use this process). Have a great idea for how navigation might work? Found sudden inspiration for a fantastic way to display page or post titles?

Starting with the details can be the opposite of a normal workflow because we typically start from big to small (i.e., layout structure and then content). However, this is a great way to get the creative juices flowing.

OwaikeOWho says a web layout needs to be constricted to 4 straight-edged sides? OwaikeO, a Kuwaiti graphic designer, uses an illustrative layout with an expressive perimeter for its content area.

You may be surprised by how well working on a small detail can spark new thoughts in your brain about different areas of the site (which Sacha Greif advises to try out as well on his article on busting through web designer’s block).

Before you know it, you will be skipping around your canvas trying to keep up with the great ideas bouncing around.

2. Think Outside the Box; Don’t Use a Pre-Described Layout

Grid systems such as the 960 Grid System are wonderful for displaying web content, not only because they are easy to set up and because they increase your efficiency in deploying and maintaining website projects, but also because they improve the usability and consistency of your web page layouts.

With some projects, there is something to be said for consistency and cross-browser support, especially if you are dealing with a broad, mainstream target audience.

On the other hand, having such a strict layout mechanism may be the biggest handcuff on a designer looking to think outside of the (layout) box.

What if it didn’t matter what size your page was? What if it didn’t matter how it was laid out?

For a change, create the product and then challenge yourself to a new solution. There is no rule that states your site cannot be accessible unless it fits in a 960-pixel box. So instead of curbing your ideas around these restraints, build the idea and find a way to make it work.

LucumaLucuma, an audiovisual production firm, creatively steps outside of the box by using a horizontal-scrolling layout to fit the site’s content in one page.

Instead of sticking within your comfort zone, explore different layout types, look at how new standards like HTML5 and CSS3 (with progressive enhancement) can make your work better, and so on.

3. Do Not Use a CMS

Much like set layouts and grid systems, content management systems of today are amazing tools that save time and effort while maintaining beautiful design standards and pretty good flexibility. Platforms like WordPress, Expression Engine, and Drupal are very malleable and are used in innovative ways, but they still do provide designers with restrictions. Especially when combined with grid systems, which many publicly free themes do in order to speed up development, content management systems can be dangerous to your creativity.

It is no rare occasion that I find my first iteration of a client’s website design to be my favorite. 99% of the time, the progressive decline of an initial design can be attributed to a client who wants content added, taken away, or displayed in a particular fashion that the initial layout wasn’t meant to do.

If you are working on a creative project or a project just for fun, take advantage of your newfound freedom over content. Think about it: We use CMSs because we want an easier way to deal with site updates and changes, but if we eliminate this concern — at least on occasions where this is acceptable — we open so many new possibilities for the design.

4. Avoid Online Inspiration

For projects we want to be truly unique and innovative, we should probably avoid looking at what other designers have done before us. This means we mustn’t start our innovative web design project by looking at design galleries and design showcases.

Online galleries and blog posts containing inspirational examples of web designs are useful for getting inspiration. I look through these sites and blog posts all of the time — I love to see what other web designers are up to, and I even recommend you do, too.

Really, my big issue with finding inspiration this way is that it’s just no fun to start your new design with someone else’s design in mind.

Admittedly, this is hard. For example, clients who aren’t sure what they want in their website often find it helpful to provide you with links to websites they like in order to visually demonstrate what they’re expecting. It’s also difficult to start completely from scratch when you’re having a bad day, and to get your creative juices flowing, visual stimulation through design-aggregating websites and blog posts can jumpstart idea-generation.

NOFRKS Design StudioNOFRKS Design Studio has an interesting single-page navigation scheme that has a background that changes depending on the time of day you visit the site.

However, if you want to produce a site that’s unique, see what you can come up with on your own. It won’t always be great — and that’s fine — fail often and fail early. Try to avoid the trap that you have to do as good as the competition when you could dig an even better solution out of your own mind.

5. Try at Least One Thing You Haven’t Done Before

Taking advantage of your experience and building projects based on techniques that have worked well in the past tends to become a standard practice for a lot of us — it’s quicker, easier, and efficient. But this gets stagnant pretty fast, and as part of an industry that shifts in nature very quickly, we should always encourage ourselves to try out new things and forge new talents. Is this going to work out well for you every time? You can bet your ass it won’t, but it will work at least once more than it will if you never try.

6. Pretend Like You Don’t Have to Code It

Let’s set one thing straight. In the "Should web designers know how to code?" debate, I’m of the opinion that web designers do indeed need to know how to markup and their own web design (at least in CSS and HTML).

However, web designers that know they’ll end up having to code a web design means we will have experienced-based design hesitation and restraints while producing the look for a new site (e.g., "I know this transparent PNG won’t work in IE6, and I don’t want to deal with that, so I’ll just avoid it"). The more HTML and CSS browser-rendering issues I encounter, the more it affects the way I develop the mockup of my sites in Photoshop.

Knowing how hard an element or interaction design is going to be to implement using CSS, HTML, and client-side scripting shapes the way I execute my ideas on a graphic level. This really isn’t bad at all. In fact, that’s why you should know how to code your own web designs. Knowing what the medium’s limitations are is key to crafting realistic and usable websites. And if you have deadlines to meet and know of a way to alter a design to save time and retain visual quality, you’ll be a more prolific web designer.

But, in terms of creative freedom, constantly thinking about how difficult or impossible things are to implement is a big restraint, and if we want to create something out of the box, ignorance is bliss.

EcokiA big photo-realistic background, elements that need to have transparent backgrounds, an organic and unorthodox layout structure — that’s way too much work, but Ecoki pulled it off brilliantly.

For projects that need to be innovative — projects that are risk-loving — temporarily pretend that you don’t know how HTML, CSS, and JavaScript works. See what you can come up with. Is it realistic? Does it translate well on the web where people need to use your design?

7. Go Old School

Many designers today are well-versed with the idea that using tables in your web design is sloppy and a bad practice. But this isn’t the entire truth. Tables still hold an important place in our web designs, and while I wouldn’t encourage you to use them to develop a web page layout, they do still have relevant applications such as displaying tabular data.

Tables aren’t the only elements left up on the shelf in the garage these days. Using marquees or blinking elements also stirs up nightmares for a lot of designers, and their poor reputations linger from a dark time in web design.

Trying to find a classy way to use a marquee-like element (which you should do using JavaScript or CSS3 because the <marquee> tag is deprecated), for example, will most likely be a challenge and a productive exercise in producing a creative solution to bring an old option back to the surface.

jQuery RobotjQuery Robot, a proof-of-concept, scrolls the background horizontally, much like what <marquee> did with HTML text.

Revisiting some of our long lost friends in order to restore their reputation can be a fun project and can spark a lot of creativity.

8. Go New School

Browser testing and debugging sucks. It is one of the worst — yet most necessary — tasks involved in every web design project we embark on. Since web browsers (and other platforms that we have no control over) are displaying our work, it is easy to consider them the most crucial constraint on what is possible in web design.

However, competition in the browser market is ramping up, with browser vendors constantly trying to one-up each another (even Internet Explorer’s playing the game). Competition is good because browsers are less likely to accept the status quo, implementing future web standards more quickly than ever before.

Seeing what we can do with new things being introduced in HTML5 and CSS3 is a fun and popular hobby for the informed, modern web designer. For example, check out these proof-of-concepts that use CSS3 and/or HTML5:

Unfortunately, cross-browser compatibility tends to rain on our parade and limits the extent to which we will go when it comes to exploring how HTML5 or CSS3 can improve the form and function of a project. However, with enough understanding of the new specs, you should be able to use them without neglecting web browsers that do not/will not have support for these future standards.

To learn about CSS3 and HTML5, read the following resources:

9. Provide Unique Constraints

Most of what I’ve discussed so far are meant to encourage you to think outside of the box and provide your mind with limitless possibilities of what you can do with your designs. However, if you find yourself fighting a mental block or struggling to take advantage of your newfound freedom, one of the best methods for generating some unique ideas is to give yourself some restraints. Of course, we don’t want to slap on the same old limitations we always have; instead give yourself some clever limitations and see how you can bend your design in order to play by the rules you give yourself.

These constraints can come in any form. For example, what if you avoid using 5 colors that you almost always use in your web designs? What if you designed a site using nothing else but Arial font? What about keeping the page weights of your web designs under, say, 95KB? Pulling off an appealing design within limitations such as these will force you to use your skills to work your way around the walls you build yourself.

10. Collaborate with Others

Working as a member of a team can be both a wonderful and a wonderfully frustrating experience. On one hand, dedicating experts into specialized areas of a website’s production will often yield better results in less time. On the other hand, communicating your own thoughts and ideas with another person can be a challenge, along with trying to interpret their take on the problem the team faces.

However, partnering up with another designer (or a group of designers) can be both fun and inspiring. This technique can be seen at its finest in Dribbble rebound challenges. While Dribbble did not invent this idea, it has brought a lot of light to it with a large and very talented design pool to draw from. Designing based on another person’s work is a great way to force creative results based on the unpredictable efforts of a different designer with limited restrictions.

Conclusion

What will happen if we execute all of these ideas?

Well, let’s take a look:

  • Your site will not have a standard layout
  • Your design might not function in content management systems without a lot of work and tweaking
  • You won’t be utilizing any of the experiences you have accumulated
  • You won’t be taking advantage of the experiences other design professionals have willingly shared
  • Your design will involve experimental ideas that may not work
  • You may be using techniques that are considered old-school (like marquee or blinking elements)
  • You may end up using code that not all web browsers support (e.g., CSS3 and HTML5)

Sounds like a pretty awful way to build a website to me — but it may just work.

Really, though, if these ideas produce just one good idea, a new technique, or a better gauge of your professional skills, then you have had succeeded in my book.

If you find just one new idea that is your own and that you love, then you have hit a home run in terms of getting better at web design. This will not happen all of the time; it won’t even happen most of the time. The real value in exploring your own creativity is to be able to use just one idea that no one else has done before.

What other methods do you use to spark creativity in your work? Have you tried the ideas discussed in this article before (and how did it go)?

Related Content

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

68 Comments

Taimur Asghar

January 13th, 2011

Great article.
Point number 4 is excellent. and I completely agreed with you on that one. How can we design innovatively if we get out inspiration from already designed work.
Again, great points. Thanks

Cosmin

January 13th, 2011

Jason,

can you name one design restriction that WordPress implies on any particular design? :) (I’m not talking about other platforms, since I’m not familiar with them)

I know sometimes it’s good to write an article or paragraph that people wouldn’t agree with (to encourage a comment like mine, for example).

But I think that you’re misleading beginner designers who are starting to learn WP theme design into thinking they’ll be forced to follow certain design rules/guidelines/etc.

Again, I’m only talking about WordPress – I don’t know how it is with other CMSs.

Other than that, good read – thanks for putting it together :)

Joomla

January 13th, 2011

I always start with blank canvas only, but we always go with CMS for the development phase, since clients dont want to invest on each page HTML/CSS conversion and then now everyone needs dynamic features.

I like all the points, except the CMS points.

May be, just thinking and mine is different on that.

Jeremy

January 13th, 2011

great!

fontburger

January 13th, 2011

Great read and awesome examples. You say, “pretend like you don’t have to code it,” but I do have to code it! :) …it’s quite restrictive. Knowing limitations is good, but if I didn’t have to code it I know the design would be much different. The idea of being the designer and passing along mockups to a developer sounds amazing!

demogar

January 13th, 2011

To be honest I enjoyed this read so much. I think you’re right in all the points.

The number 5 (Try at Least One Thing You Haven’t Done Before) is my golden rule. I always do something new in all the projects (at design and development). I think it makes me discover some new ways to develop and I also find some new features out there… it keeps me updated.

Great read, thanks :)

Theo

January 13th, 2011

You make great points in this article and share some great resources, keep up the good work and thank you!

tomas

January 13th, 2011

sorry for english.
But how do you think, if you will draw a super duper, beautiful ant etc.. web design, without thinking how to make it run. That will be (i guarantee) a real headache for programmer and he will spent a lot more time to make it work. who will pay for that time? or who will think that it is really worth to be done?

Barry

January 13th, 2011

I like this article. Blank canvas is beautiful. I say forget what others are doing, you now become spontaneous and authentic to be yourself.

David

January 13th, 2011

Innovation is always a hot topic in any design field. But is no easy task. To innovate, the designer must engage in an innovation process. That means steps, lots of steps. Also, innovation is not linear, and is more demanding than any step wise approach, but steps sure helps give order to any process.
Most people don’t know squat about innovation, often missing where to begin. For that reason I’m going to give a hint on the first 3 steps on any innovation process (Usually there are more than 15 steps)

Step numero uno is to Identify a current condition that needs intervention.
Step numero dos is to Describe (qualitatively) and to Measure (quantitatively) what has been identify.
Step numero tres is to Research systematically using different methods what has been describe and measure in order to expand understanding of the subject.

This gets you so far as to have lots of information at hand. You still need to Evaluate that info, Analyze it and Interpret it, before you even come up with Ideas or Concepts. So I highly encourage everyone to start building your own innovation process, and contribute to make a better, effective web experience. Thanks!

Erkan Yilmaz

January 13th, 2011

Hi Jason,

You’re right !!! You only can grow when you push your limits !!!

Jason Gross

January 13th, 2011

@Cosmin & @Joomla

The primary purpose of this article is to be an exercise in thinking creatively. When your thought process involves any CMS as a part of the project you immediately begin to think in terms of a theme and repeatable site elements. Maybe instead we want to make a site where all of the pages have different layouts and structures. Sure, this IS possible with WordPress or other CMS’s out there but we generally won’t find ourselves at the creative result of producing a new look for each page if we know we are designing for a CMS from the beginning.

@fontburger & @tomas

This is exactly why I bring up the point of forgetting that you have to program anything. Once again the point of this article is to help people release their creativity. As I stated we may end up with a result that is impossible to code at the end of the day but what we can take away from that is either 1) A creative coding solution to a difficult problem or 2) Several unique design elements that we may want to keep in our toolbox for future design use.

Joberror

January 13th, 2011

Yes! Great Article…

Especially the No.3 (Do Not Use a CMS). A web designer that depend so much on CMS seems to be so lazy and probably refusing to learn or create New things on their own…

Love It!

Mirko Sassetti

January 13th, 2011

Great read, but i don’t completely agree with point 3.
I think the problem is to use the right CMS, one giving flexibility. Try SilverStripe, next point 3 can be deleted.

Allen Harper

January 13th, 2011

Great article… there are plenty of times when the spark of inspiration just isn’t there… and when that happens, innovation suffers. Thanks for some great tips on rekindling that spark.

Pieter

January 13th, 2011

Excellent article. I’m going to try these for a redesign. Wish me luck.

Anna

January 13th, 2011

Thanks!

You got my out of my creative block.

Salvo

January 13th, 2011

I agree with everything, the post is really brilliant, but I’m sorry point 3 it’s completely nosense and stupid.

if you are a good webdesigner you are able to bend every html/css code and/or any cms to your design.

the idea that a cms limits a design it’s like say “hey you can’t do this with Css”, which was a kind of quote that belongs to the 2003 era.

CMS manages content, not design, and in modern webdesign clients wants more flexibility and independency so you cant not use a CMS.

sorry I know you’ve already answered this but I thin it’s important to make it clear again.

except this, I repeat: brilliant post!

Hannah Hurst

January 13th, 2011

Great article to read. I completely agree you have to push yourself and think outside of the box when designing otherwise they will all just end up looking the same.

I think you definitely need to attempt something new each time and I always bare that in mind when designing. I also think that even though the end result will be on a flat screen I try to make my design come to life as much as possible to stand out from the rest.

However the idea of pretending like I don’t have to code it is a little hard to imagine, as much as I wish a tall dark handsome guy would do this for me over night I know its going to be me doing it in the end :-)

Great tips though, thanks for sharing.

Chunks

January 13th, 2011

Great article, really well thought out.

Thanks!

Matt Koyak

January 13th, 2011

This was a great post, full of some very insightful quotes. It’s refreshing to see the ideas of another designer align so closely with my own (except with regard to tables – lol). It’s so frustrating when you discuss an idea with a client, think you have it nailed and then design the site only to have them waffle on layout and content later. Unavoidable. That said, you always need to push the limit. This was great stuff; I’ll be passing this on! Thanks!

Vivek Parmar

January 13th, 2011

impressive article.
one thing i like to add as newbies doesn’t know how to design for them CMS is perfect to get started with, get a default template and start customizing it

Mike Oh

January 13th, 2011

It was good but I stopped reading after the “Do Not Use a CMS” phrase.

I don’t see how a CMS could hinder ideas on “creating innovative and unique web design”. With CMS’ flexibility, I believe that they are the ones that sparks creativity. Designers should only worry about the front-end site, unless it’s their job also to code how to put content without editing the html file.

Melissa

January 13th, 2011

This was the perfect article for me to stumble on today. We are just getting ready to redo our whole site and well… we tend to be our own worst clients! There are days when it feels like no fresh ideas come to you at all. These ideas are great and already have me thinking differently. Great post.

Nathan

January 13th, 2011

I disagree with #3, don’t use a CMS. With the advent of tools like CouchCMS, why wouldn’t you want to use a CMS? I agree for certain php applications like WordPress and Joomla, but Couch is so easy to implement into a HTML/CSS site that it’s almost a crime not to if any content is involved.

Robert Hsu

January 14th, 2011

Thanks Jason, for this really good article… will bookmark it for revisits when I am starting afresh :)
Robert

TheAL

January 14th, 2011

“Do not use a CMS” should be “Not to rely on one so much that you’d be out of job if no one let you use them anymore.” But this isn’t an article about development. It’s about design. So why try to devalue content management systems? A good CMS, like Drupal, has the potential to be invaluable. Cuts down on time, has a whole community driving it, free, secure, and does so much. Seems like the suggestion not to use a CMS is from the design standpoint, not development. Well, usability and functionality come before innovation and uniqueness. If you don’t wanna use a CMS because it hinders your art, well, you shouldn’t be making websites. Make logos instead.

Jafar

January 14th, 2011

Pretty good recommendations, thanks

Elaine

January 14th, 2011

Great post! I completely agree with you here.

janice

January 14th, 2011

Your comments on ‘don’t use a CMS’ really don’t apply if you use MODx CMS as there are no design constraints whatsoever which makes it a great cms for the designer/front-end developer.

haydyn

January 14th, 2011

“Sounds like a pretty awful way to build a website to me — but it may just work”

are you mad?

Seriously this has to be one of the worst articles I have read for a while. Your suggestion that following your rather meaningless selection of ideas will produce some spark of creativity that will create the worlds greatest website is odd to say the least.

you clearly lack professional direction…

the way to create a website is documented thoroughly and it is called A UX PROCESS.

You seem to forget that as professional designers it is our job to create SIMPLE, EASY-TO-USE, PROFITIBLE websites for our clients, and your suggestions of non-standard practices only will lead to HUGE usability issues which is a whole different matter in itself.

Developing your creativity does not come from a magic place, creativity is an analytical process which requires processes to produce an outcome. The experience can then be art-directed visually whilst remaining functionally sound and profitable.

It’s articles like this and many others on the web which give people below-par information and cause them to go around in circles with false hope.

Jodo Kast

January 14th, 2011

You will find a way to merge your super duper “designer” within the framework of a CMS. Don’t say “DON’T USE A CMS.” That is the challenge. The reality is, most projects should have a CMS for the client. Maybe if you designing for yourself, you’d leave out the CMS aspect.

Lee Marriott

January 14th, 2011

Excellent post, I always try to think outside the box when it comes to web design. The non standard designs are great for portfolio work, however if its going to be a content heavy site then it takes more time than using a decent CMS.

Sarah

January 14th, 2011

Thanks for a fantastic article! Very Helpful.
Your point No.2: “Think Outside the Box; Don’t Use a Pre-Described Layout”: I agree entirely with you but sometimes (if designing for a client) when you do “think outside the box” the client has you change it all again!

Artelx

January 14th, 2011

Too ideal, too bright… it`s sooooooooooooo far from real life… maybe it`s beautiful for work when you don`t need to pay bills, or you can afford to work on one project for years, but as a developer and designer I can`t agree with most of your post.

but is was fun reading ;)

Fix The Sky

January 14th, 2011

This was a fun read. I agree with almost everything, except for avoiding CMS systems.

I think, to be a good designer, you need to evolve with your limitations and find innovative ways to embrace them.

Daniel H Pavey

January 14th, 2011

Really great article with some good in depth advice.

I’m struggling to develop my design skills and this kind of thing is really inspirational.

Jason Gross

January 14th, 2011

@Matt Koyak

Don’t be afraid of tables Matt! :p You know I feel like anyone who gets into the design game these days immediately gets pounded with the idea of tables being bad bad bad and more bad because most of us had to experience the abuse the poor element got back in the day. While it is true that they are bad bad bad for layout it doesn’t mean that tables should not be used to display data ranges in your projects. Don’t discard this entirely semantic way to code because of a bad connotation with the element.

I find everyones offense to “Don’t us a CMS” pretty intriguing. Content management systems have been bending over backwards these last few years to try and get to a point where they can do all of the things designers want. We have gotten to the point where what we can do with them is pretty limitless but as I stated in an earlier comment a designers mentality towards a project changes when he/she knows they will be putting everything in a CMS in the long run. It prevents you from starting a new project with a truly fresh mindset.

Jacob Gube

January 14th, 2011

@haydyn: Interesting opinion. Relax.

Michael Gunner

January 14th, 2011

Hi Jason

Great article.

I am not offended by your suggestion to not use a CMS, those who are seem to me to be misplacing the context of this article, which is if you want to create a revolutionary web design that is completely different from anything else.

However, in practise, if we are designing a site for a client the chances are it needs to fulfil certain requirements – most of which are easily handled by WP.

Additionally, perhaps the other way of putting it, is rather than saying “Don’t Use CMS” we say “Don’t Use CMS…Yet.”

My suggestion is that we can approach a new website not thinking about a CMS. There is nothing to then say that once we have come out with this revolutionary, “out there” website, that it can’t then be powered by a CMS. WordPress doesn’t force you into a rigid, templated design…there is plenty of scope to come out with something innovative, my feeling is just that if you are set on a particular CMS from the off, you tend to approach the design in a limited manner. Putting choice of CMS etc off until AFTER you have designed the site removes this narrowing of thought.

Spidermonkeyness

January 14th, 2011

@haydyn – Thank you for your comment. I was beginning to think I was mad.

This article, in my opinion, gives a hit or miss approach to web design. This article is almost entirely designer centric and that I find extremely disconcerting.

There is little or no mention of the user, the people we actually design for, the reason we are able to do what we do. I would hope that when designing we delve into the world of who exactly we’re designing for and be inspired by that/them.

I’m sure that some of these may inspire designers (which I suppose is the intent) but I would be wary of using this as a creative process.

Strixy

January 14th, 2011

I totally agree with your words on tables. 10 years in the field now and I can’t tell you how tired I am of watching rookies knock on tables and then loose their hair fighting with floating div’s, full screen backgrounds, or user names that take up more space than the 100px width they gave their div.

Which brings me to a point you didn’t make. Always, always clarify as early as possible which browsers you’re supporting so your client doesn’t throw Blackberry, iPhone or IE6 support requests at you 2 days before launching.

I understand where you’re headed with the no CMS idea. I’ve worked and specialized in supporting CMS’s (back and front end). I almost lose my mind when a design comes in that’s static, makes no allowance for vertical flexibility and clearly is without any understanding of the content the client actually wants to place above their non-repeatable, multi color, radial gradient that’s only 300px high.

Another tip. When you do drop shadows, gradients or halo’s be sure to use a transparent to color gradient. If you go color to color, you’ll have a very hard time repositioning it, repurposing for other projects, or reusing it on other pages.

I get a number of designs that are, I kid you not, built into a screen capture of their boss’ desktop so they can hit the exact pixel width they need to make it appear full screen for their boss… and only their boss. There is no accounting for anything larger or smaller. This is not cool. Please educate your boss – maybe show him/her what that layout looks like on other monitors so they get the idea.

A lot of the work I do is based almost entirely on the budget. You don’t get modal windows, light boxes, ajax galleries, and cool web2.0 effects when you’re paying for a simple template. There’s always the option to up-sell though. :)

Maria Malidaki

January 14th, 2011

First off, I enjoyed Jason’s ideas on testing new methods during design.

@haydyn:

“The way to create a website is documented thoroughly and it is called A UX PROCESS.”. I will personally disagree with this approach. I think it’s at least misleading to call activities like designing a website a “documented process”. Building a useful, profitable and accessible website includes inspiration, artistic ideas, thinking out of the box, and *simultaneously* forging these concepts together with UX to get a balanced result of both interesting expression and solid functionality.

The creativity part needed for a design cannot be restricted to “documented processes” – this is the human brain we are talking about, not machine logic. You also said creativity doesn’t come from a magical place – creativity can be incited by anything. If you approach creativity by analyzing stuff, then yay for you! :) Please don’t force it down the throat of everyone else as if it’s universal truth. The process is extremely personal for each and every one of us, and no rules apply for creativity explosions.

“Your suggestions of non-standard practices only will lead to HUGE usability issues” – Thinking outside standard practices is what gets evolution going, in any aspect. I believe the generally safe idea is to use the standard practices and try some unorthodox methods to see if you can move your practices a step further. Experimenting has always been the way to see if something can work better or not. You sound like suggesting that we stagnate to the current knowledge pool, without trying to produce any new knowledge. How tragic would that be?

As for the rest of your comment, a) I don’t believe anyone has given you (or anyone else for that matter) the right to judge anyone’s professionalism (“you clearly lack professional direction…”) and b) I would personally suggest that you tone it down a bit (“are you mad?”). There’s no need to get overreacting and offensive just because you share a different point of view :)

chrelad

January 14th, 2011

Wonderful list of rules for designers. I really like the one that states “Pretend like you don’t have to code it.” That’s perfect! Any web programmer worth their salt should be able to take anything you give them and make a gracefully degrading page that looks and functions according to the designers specifications.

Karan

January 15th, 2011

Great Article ! Very useful for me :)

CreativeON

January 15th, 2011

My suggestion is that we can approach a new website not thinking about a CMS. There is nothing to then say that once we have come out with this revolutionary, “out there” website, that it can’t then be powered by a CMS.

sandun

January 15th, 2011

good for designers

David K from Philly

January 16th, 2011

I’m of the opposite perspective when it comes to #4. Everything people do is based on another’s work. People naturally build on the great shoulders of those before them. While it is true that you should never plagiarize, I think it’s quite helpful to look at inspiration from other designers… as well as musicians, architects, painters and even nature itself for inspiration.

I would have gone the other direction with #4… Look for inspiration wherever you can.

David

Guruh

January 16th, 2011

Great article !!
the first thing I do is always start with a blank canvas because I can put everything from the point of view my client. And every clients have a different style. Thanks for sharing

Nikki Davis

January 16th, 2011

Great article and by the looks of it, quite controversial too.

One thing I would add, I have seen some truly inspriring designs using the 960 Grid System and and if I may give any new designers a bit of advice it would be to have an open mind.

Another bit of advice, get your designs in front of some good critics, don’t be afraid to show other professionals for their opinions.

@haydyn I completely agree with you about creativity being an analytical process and most definitely your point about it being a UX process. A well thought out website will help any business be more successful.

Nikki

brainspills

January 16th, 2011

“Don’t use a CMS”

Everyhing else, except this one, makes sense… The idea of using a CMS is abstracting presentation from logic, thus, still not reducing the creative freedom… CMS do not in any way prescribe a design, much more “restrict” a designer… A good web designer/developer should know how to effectively separate, design, content, and logic altogether… If you use your first point, “Start with a Blank Canvas” on a CMS, then you will find it amusing that even with a CMS, design possibilities are endless..

brainspills

January 16th, 2011

Adding to my previous comment, having a CMS in place allows you to focus more on the design process than making the website “work”…

Erik

January 17th, 2011

Thank you for the good read. I’m doing a re-design of my website right now and especially point 6 is very useful. I thought I was almost finished, but after reading this article I think about starting at the beginning again….

Pushan

January 17th, 2011

Interesting article.

I’m a marketer who also helps develop sites. If I were to look at this article as a “How to get design inspiration” answer, it’s not one I would recommend.

I do agree with the design being an analytical process comments provided here. Very few business websites would begin without a layout, and most would follow an analytical process (I’m talking from experience here)

Also, a CMS can be used for good design, provided you have a good CMS, and a good design team.

Shiva Narrthine

January 17th, 2011

Great article :)
totally agree with #6 on pretending you’re not gonna code bcz that’s kinda like the prob i face when i design something.

Chris W

January 18th, 2011

10 great points – Some of the best advice I’ve read on a blog for a long time.

crispBytes

January 19th, 2011

Definately agree with this article, especially for pretending not to code the design design part.. Sometimes I have been pretty often bothered by coding when I am working on layout.

Sven

January 19th, 2011

“Do not use a CMS”??? are you kidding?

Keiron

January 22nd, 2011

I disagree with point 3. I havent used all CMSs available but from my experience all of them can be adapted to anything required. The best of these is, by far, MODx which is described by the creators as a framework.

MODx Evolution was the main system for some years which was always easy adapted to any needs, but now in Revolution it doesn’t even come with an installed template – so there is no excuse.

Marco Barbosa

January 25th, 2011

Loved this article.

A CMS is to “Manage” content.

What if you don’t have much content to manage?
If your menus are the same, your content is easy to update, your design is different, you don’t need users and anything else. Don’t use a CMS :P
My portfolio is CMSless and I love it.

I totally agree with all points. Should have read this article before.

Really great points here. Thanks!

hdoug

January 25th, 2011

I’ve said it before and I’ll say it again..

Tables FTW

clara

February 6th, 2011

NICE, NICE, NICE, thanks Jason!!!

Valdecio

February 16th, 2011

Great article. :D

Jerrick

February 21st, 2011

Those 10 steps are effective but how actually people look for unique website? People now prefer to create a web design which is simple and in a short time and unique as well. That why everyone is taking shortcut to create a good website and it actually not a real good website yet .

stefan

March 14th, 2011

I find it really interesting that your site, along with the few random portfolio pieces I looked at rely on Word Press.

4. Avoid Online Inspiration: that title should read “4. Don’t do your homework”.

As web design evolves, its crucial for us to look around. I’m not saying that you should rip others design work off, but starting out there is no better way to develop something usable and nice then looking to foundations of web design for inspiration.

C. Jamero

July 1st, 2011

This is a really great article and I have learned a lot!

But it’s like a letdown on no.3 on my part, especially now that I am only starting to use and love WordPress CMS. My thesis instructor said to us before -”Why build something from scrap when it is already there?” WordPress is a great tool for managing content especially for less knowledgeable users. We don’t want our clients to be editing their content via file managers or cropping images in Photoshop which they might not even know how to.

One more thing is that while designing the website, I think we should also be thinking ahead, I mean, it’s a website and it needs to be coded. At this early stages we are already avoiding unnecessary time and effort when we get to the part of coding the design.

I believe we can always work things out like marvels of engineering we see today.

baidyanath

December 24th, 2013

I am not following these points, I always refer a reference. Thanks. My be these points will help me to produce a unique design that will suit visitors or visitors will like.

Leave a Comment

Subscribe to the comments on this article.