Trang

15 thg 3, 2011

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.

phát triển đầy đủ ý nghĩa của một khái niệm là một bước quan trọng trong bất cứ một dự án nào.... đó là một kỹ năng mà một vài người đã dành thời gian để tìm hiểu và đánh giá cao nó.hôm nay chúng ta sẽ cùng đi qua từng bước từng bước một quá trình tạo một concept và quá trình tạo cảm hứng.


Why Developing a Concept Matters in

Web Design…

tại sao cần phát triển vấn đề này trong webdesign...?

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.

đối với bất kỳ thiết kế nào thì trc tiên ta phải bắt đầu với nội dung thiết kế vỏ trc khi đi vào chi tiết. ta sẽ bàn về phương pháp là thiết kế vỏ.

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.

bất cứ dạng nội dung nào nên có 1 khái niệm dằng sau nó, nhưng buồn thay ,nh nhà tke chỉ tập trung vào tke đẹp mà thực sự đã bỏ qua í nghĩa đằng sau nó. hay tệ hơn họ tk website dựa trên khung từ trc mà ko cần pải nghĩ về tke ban đầu mang lại í nghĩa thực sự là j.

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.

tke tốt mang ý nghĩa đằng sau nó - ko chỉ là giao diện đẹp,filters hay typo tốt - mà mỗi yếu tố nên thực sự nói ra điều j đó trong dự án đó

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.

nếu bạn theo phương pháp thu thập sáng tạo yêu cầu (làm sao ....), bạn nên có đủ nền tảng để xây dựng dựa trên và đề ra những dạng nội dung hay phong cách thiết kế của bạn

Start By Collecting a Library of Reference Images --- hãy bắt đầu bằng việc thu thập thư viện hình ảnh tham khảo

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.

một trong nhg cách dễ nhất và đơn giản nhất để tìm ra í tưởng là pải hỏi khách hàng của bạn đưa cho bạn những từ khóa để miêu tả làm sao họ muốn mng cảm nhận về site... năng động,tươi mới , trẻ,... bằng cách đơn giản là search những từ khóa này trên google.bing....

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

lựa chọn những h/a và chọn một trong nhug cai bạn thik, bạn sẽ dễ dàng tìm ra cho mình một thư viện khổng lồ những ý tưởng để bắt đầu .


Design Begins With a Brainstorm --- thiết kế bắt đầu với brainstorming

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 :)

giống bất kỳ bài tập brainstorming nào, ko bỏ bất cứ ý tưởng lạ nào ... tuy nhiên chúng là khác biệt,nó

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.

vd khi khách hàng hỏi tôi thiết kế với từ "fresh ",tôi sẽ đơn giản nhấn enter và search nó trên google.

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?

làm sao để những h/a này tạo cảm hứng ? chính xác điều chúng muốn nói về th kế là j?

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

đơn giản là khách hàng muốn một tk mới và bằng pp này thì những h/a giải thik rằng :

  • I should mostly go for organic or curved shapes -- nên hình dung có hệ thống và theo dạng đg cong
  • Light “fresh” color shades are preferred (more on color in a later article) mầu sắc tươi sáng
  • Use of “crystal” style and semi-transparent components.dùng kiểu pha lê,và các thành phần bán trong suôt
  • Have a lot of white space and no over-crowding of components --- có nhiều khoảng kgian trắng và ko quá lấn át các thành phần

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.

tôi thường thik làm việc này cùng với 2 hay 3 ng thke khác để giúp đưa ra những ý tưởng khác nhau, tôi sẽ hỏi từng ng về những bức ảnh mà họ tìm đc và họ sẽ pải tìm nhug bức ảnh đó trong 15-20p, rồi chúng tôi bắt đầu thảo luận cái mà chug tôi thấy trên bức ảnh đó, bạn sẽ ngạc nhiên rằng làm sao mà mng lại đưa ra những quan điêm hoàn toàn khác với cái mà bạn nghĩ và thấy, và điều này có thể mở ra í tưởng mới cho bạn .

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.

đó là điều quan trọng trong việc thực hiện tk ! từ "fresh" có nghĩa khác với từng người, và do đó ko chỉ dựa vào việc tìm kiếm cho kết quả hình ảnh ra sao hay sự giải thik của riêng bạn về nguồn cảm hứng.


Don’t Copy Ideas, Steal Them!đừng copy hay ăn trộm í tưởng

Good artists copy, Great artists steal,
- Pablo Picasso (1881 – 1973)

My interpretation for this quote is this: Copying another idea will make you a good designer, however, “stealing” an idea or concept from within another design and using it wisely (without blatant copying) will make you a great designer.

theo giải thik của tôi là : copy í tưởng khác sẽ khiến bạn là 1 tk giỏi, tuy nhiên,"ăn trộm" một í tưởng hay concept từ bên trong những tk, và sử dụng chúng khôn ngoan sẽ làm bạn trở thành nhà tk tốt nhất .

Stealing an idea is hard – much harder than copying – you need to truly understand the concept to lift it from one place and move it into your design.

ăn trộm một í tưởng là khó, khó hơn copy chúng rất nh, bạn cần thực sự hiểu concept để chuyển nó từ 1 nơi này sang tk của bạn


Case Study: Stealing the Pyramids

In a recent project, I was working with a team on a site for an Egyptian Tourism portal. They did not want a straight forward “Pyramids, Karnak, Pharaonic” style site that most people would go for… They wanted something modern, yet they wanted to keep an Egyptian identity that would literally say “this site is from Egypt”.

gần đây ,tôi làm việc với một đội trên trang của cty du lịch ai cập,họ ko muốn những style cũ là " kimtuthap, pharaonic..." những style mà mng đã quá quen thuộc, họ muốn những thứ mới mẻ và hiện đại hơn, nhưng vẫn muốn giữ đc đg nét của Ai cập cái mà khi ng ta nhìn vào thì có thể nói đó là trang web của ai cập

It was a real challenge, but by going through the above methodology we came up with images like these:

đó quả thật là một thử thách, nhưng tôi sẽ thực hiện pp ở trên qua các hình ảnh .

Now the client didn’t want cliché designs showing straight forward hieroglyphs or images of ancient Egyptian temples and stuff like that, but by looking at the images we started building on the idea that we can use some elements such as the slanted walls and the ancient Egyptian portals and how they would relate to the site being a portal to Egypt.

giờ khách hàng ko muốn tke dập khuôn kiểu chữ tượng hình Cliche hay các hình ảnh ai cập cổ, nhưng bằng nhg hình ảnh chúng ta bắt đầu xdung trên í tưởng đó ,chúng ta có thể dùng vài yếu tố như những bức tương nghiêng và làm sao để chúng có liên quan tới hình ảnh của toàn site và Ai cập

The problem is that the only style that’s unique to Egypt is Pharaoh-style. If we went with Arabian art, for example, it would not be unique to Egypt. If we show diving or beaches, it is not unique. If we go with any other style, it will not be unique to Egypt and that was a strict requirement.

vấn đề là chỉ có kiểu ân tượng độc đáo của Ai cập là kiểu Pharaoh,Ví dụ , nếu chúng tôi bắt đầu với kiểu nghệ thuật arabian, nó sẽ ko độc đáo cho Ai cập,nếu chúng ta thể hiện kiểu ở trong nước hay bãi biễn thì nó sẽ ko độc đáo. nếu chúng ta làm bất kỳ một kiểu nào khác thì nó sẽ ko độc đáo kiểu ai cập và sẽ ko đúng yêu cầu .

At the same time, we were told not to use clear Ancient Egyptian images or hieroglyphs as the client wanted to promote all types of Egyptian tourism, not just temples or pyramids. A tricky design brief, to be sure.

giống như lần này, chúng tôi đã nói về việc dùng các hình ảnh Ai cập cổ một cách sạch sẽ như khách hàng muốn quảng cáo cho khách du lịch Ai cập, ko chỉ là các đền đài cổ hay kimtu tháp

In the end we came up with a sketch like this:

We simply took part of the entrance “portal” pylons in Karnak temple, using only the slanted lines to identify the walls, the area in the middle was used to animate different images from Egypt and we used the left area for the logo and navigation while the whole right area was used for the content.

đơn giản chúng ta lấy một phần đường vào của cổng đền Karnak, chỉ dùng các đường nghiêng để tạo chi tiết của tường, khu vực ở giữa dùng để các bức ảnh ai cập khác nhau tạo sự sinh động và dùng phần trái cho logo và các khung trong khi phần bên pải dùng để nội dung .

It was a very simple concept, yet it fulfilled all the requirements. Such an idea would have been hard to come to mind if we had not watched the photos and images that came up from a simple “Egypt” search query.

Đó là concept vô cùng đơn giản,nó thực hiện đầy đủ các ycau, như một í tưởng sẽ trở nên khó khăn để đến trong đầu nếu chúng ta ko thấy các bức ảnh đó và từ khóa "ai cập"

We were able to steal the ideas behind the Karnak Temple and the Pyramids, and then use them in our design.


Good Concepts Speak For Themselves concept tốt


Some people argued that this concept may not be very clear when people look at the site, and this may seem strange, but concepts don’t need to be “understood” from first look at a design… nor do they need to be visually clear at all – this is not a must. This may be easily understood by looking at logos, take the Mercedes logo for example:

một vài ng nói cho rằng khái niệm này ko đc rõ ràng khi mng thấy trang web, và nó đường nhu là mới lạ, nhưng concept ko cần pải hiểu từ cái nhìn đầu tiên, và cũng ko cần chúng có thị giác rõ ràng tất cả. nó có thể dễ dàng để hiểu khi nhìn vào logo, ví dụ logo bên dưới :

At first glance for most people, it is just a 3-pointed star. However, the concept behind this star is that it represents its domination of the land, the sea, and the air – having the top arm representing the air and the 2 bottom arms representing land and sea.

ở cái nhìn đầu tiên thì hầu hết cho rằng đó là 1 ngồi sao,tuy nhiên, concept đằng sau ngôi sao này đó là sự thống trị về đât đai,biển cả, và không khí,cánh đầu tiên thể hiện cho không khí và hai cánh ở dưới thể hiện đất đai và biển cả.

Who knew? Very few people outside of the company… but that’s not the point, now is it? A good concept speaks for itself – even if people don’t immediately understand exactly what it means, the intentional shapes and ideas underneath will always take on a life of their own. Concept-less designs don’t have that kind of life… they just sit there.

vậy có những ai biết chúng? chỉ một vài ng ngoài mởi biết nó, nhưng đó ko pải vấn đề, một concept tốt nói lên bản thân chúng - thậm chí nếu ng ta ko lập tức hiểu chính xác ý nghĩa, và hình dạng quốc tế và ý nghĩa đằng sau nó


Finding Inspiration for Concepts-- để tìm ra cảm hứng cho concepts

Another great source of inspiration is to try and stay away from your screen. Many designers tend to visitdesign inspiration sites, which contain daily top designs. While this is a good exercise in other phases (such as requirements gathering and in component details), it probably won’t help much when you’re trying to come up with your own core concept.

nói chúng ddonanj này nói là ko nên tìm đến các trang web templates đẹp đẽ khác ở trên mạng,ts cái thằng này nói rườm rà, mà nên dựa vào cách tìm cảm hứng mà nó chỉ.

It’s often better to look at other off-screen sources – Billboards, Magazines, Posters and TV Commercials are very good sources if you have time, especially because the rules governing web design differ greatly from print design or TV Ads, they give you a unique perspective that help you come with up with very original ideas that you can work into your design concept.

luôn có những cách khác tốt hơn như trên các bảng xếp hạng, tạp chí,poster, và tvc là nhug nguồn tốt nếu bạn có times, đặc biệt bởi thước đo quản trị tke web khác nhau như tk in ấn hay quảng cáo tv, chúng cho bạn một quan điểm tốt rằng giúp bạn tới với mỗi í tưởng nguyên bản,cái bạn có thể lên đc concept

Architectural designs also can be good and unique sources of inspiration: các tk kiến trúc cũng có thể là các nguồn tốt và độc đáo để dựa vào :

Depending on your client and your goals, each of the above buildings can give you new concepts and ideas to use for your web site “container shell” design as in the following examples (in the same order):

dựa vào các khách hàng và mục đích của bạn, mỗi kiểu nhà ở trên có thể cho bạn những concept mới và í tưởng để dùng cho tke giao diện vỏ như hình duwois :


Notice how each of the architectural photos from above can easily be turned into viable website shell designs.

The trick is to always keeps your eyes open and use everything as your source of inspiration, don’t narrow down your options by sticking to looking only at other web designs or trying to come up with something on your own.

mẹo là luôn giũ mắt bạn mở và dùng mọi nguồn cảm hứng bạn có, đừng để thu hẹp lựa chọn của bạn bằng cách nhìn vào cách tk web khác và cố để lấy ra cái j đó cho riêng bạn


Conclusion-- kết luận

Seeing comes before words. The child looks and recognizes before it can speak.
- John Berger, Ways of Seeing

If you haven’t come across John Berger’s, Ways of Seeing, it’s worth finding a paperback copy (or at least an e-book version!). I won’t dig too deep into the details, but it’s a book that explores the ways that people see the world around them. The underlying message is that seeing is a vital and primal instinct to us humans – we “see” before we read, before we speak, and before we walk.

nếu bạn có xem bài của john berger's, ways of seeing, nó dạy bạn cách nhìn thấy mọi vật xung quanh bạn, thông điệp cơ bản là thấy đc những vật thể sống và bản năng nguyên thủy của con ng, chúng ta nhìn trc khi chúng ta đọc, trc khi ta nói và trc khi ta đi .

As such, we as web designers can take some special meaning from this truth. We should be careful to craft the concepts behind our designs because they are the first thing that people “see”. Before the words on the page or the flashy image slider that we’ve been working so hard to code, people see the shell – the concept – that creates the overarching impression of the site. Details are important, don’t get me wrong, but you can’t really nail the details until you’ve got a meaningful design to put them into.

vậy chta là những nhà thke web có thể mang tời những ý nghĩa đặc biệt từ sự thật,chúng ta nên cẩn thận để khéo léo làm các concept đằng sau tk của chúng ta bởi chúng là điều đầu tiên mà mng nhìn. trc những nôi dùng bằng văn bản trên treang hay những hình ảnh lóe sáng đang trượt .... mng thấy cái vỏ - concept và tạo chúng thật ấn tượng trên trang web, các chi tiết là quan trọng đừng cho nó là sai,nhưng bạn ko thể thực sự có chi tiết các nền cho tới khi bạn có đc ý nghĩa tk thực sự để đặt lên nó.


Read more great “theory” articles in our Web Design Theory Session!

sources : webdesigntuts.com