Share to

You can earn money or coins from your share:)

Tips: you can use Sparticle for uploading away3D effects.

Tips: you can download Sparticle for uploading effects.

Tips: The ActionScript editor is supporting Away3D, Starling, Dragonbones and Flex frameworks.

Tips: paste the web page URL then click button:) Your Best Source for Gaming
Login    or

Concept and Inspiration: Design Theory for Web Designers

Developing a meaningful concept is a crucial step in any design project... but it's a skill that few people really take the time to understand and appreciate. Today, Ahmed (UI Manager at Link Development and Adobe User Group Manager in Egypt) is going to walk us through the creation of a concept and inspiration process. We'll go through the process step by step, until we arrive at a successful concept to start our web design.

Why Developing a Concept Matters in Web Design...

In my last article, The Gestalt Principle: Design Theory for Web Designers, we established the need to start any design with the containing shell design first before going into the details, in this part we will discuss the methodology of coming up with a shell design.

Any containing shape should have a concept behind it - but sadly, lots of designers focus only on a nice-looking shape that really has no meaning behind it. Or worse, they design an entire website based on pre-existing frameworks without even a moment's thought for how an original design might bring some realmeaning to the project.

Truly great design has meaning behind it - it's not just pretty shapes, filters or typography - each element should actually say something about the underlying project.

At this stage, if you followed the methodology of creative requirements gathering (How to Get the Right Creative Requirements From Your Client), you should have enough input to build upon and work out what container shape or style your design will fit in.

Start By Collecting a Library of Reference Images

One of the easiest and simplest ways to find ideas is to have asked your client to give you some keywords to describe how he wants people to feel about his site.... energetic, fresh, young, solid....etc, by simply entering these keywords in any image search such as Google or Bing.

Choosing from these images the ones you like, you will easily find yourself with a large library of brainstorming ideas to start from.

Design Begins With a Brainstorm

Similar to any brainstorming exercise, don’t dismiss any ideas... however strange they are. It’s always easier to tone down a design than to try and spice it up… sitting down in front of your library of ideas, get a pencil and paper (which are excellent tools at this stage) and start sketching out concepts that come to your mind by looking at your library, sketching helps because ideas tend to fade away as fast as they pop into your mind :)

For example, if a client asks me for a “fresh” design, I will simply enter “fresh” in Google for example (or your preferred search engine) and checkout the image results.

Here is a sample of what I came up with:

Web Design Planning and Concept

How would these images inspire me? What would they tell me about the direction of the design?

Well, simply knowing that my client wants a fresh design and by using this method in interpreting the images I would understand that:

  • I should mostly go for organic or curved shapes

  • Light “fresh” color shades are preferred (more on color in a later article)

  • Use of “crystal” style and semi-transparent components.

  • Have a lot of white space and no over-crowding of components

I usually prefer to do this exercise with 2 or 3 other designers together as it helps bounce different ideas off each other, I would ask each one to search for images alone for 15 or 20 min, then sit together and start saying what we see in each image, you will be surprised how other people may see something totally different than what you think or see, and this may open up a totally new idea for you.

It's important to talk during this stage in the design process! The word "fresh" means different things to different people - so don't rely solely on the initial search of image results or your own interpretation to be the definitive source of inspiration.

You must Sign up as a member of Effecthub to view the content.

894 views    0 comments

You must Sign up as a member of Effecthub to join the conversation.


Or Login with Your Email Address:

Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character