23 thg 5, 2011

The creative brief – a designer’s best friend

Trying to produce a successful design without a creative brief is like trying to find a solution without first knowing the problem. If the purpose of design is to find a solution, a creative brief is paramount to identifying the problem in the first place.

Bạn cố để hoàn thành 1 bản thiết kế thành công mà ko dùng bản tóm tắt thiết kế thì cũng giống như cố gắng đi tìm 1 giải pháp mà bạn ko biết bắt đầu vấn đề từ đâu .nếu mục đích cuối cùng của thiết kế là để tìm 1 giải pháp ,thì bản tóm tắt sáng tạo chính là bước tối ưu để nhận ra vấn đề đầu tiên .

When people feel they had to express themselves for originality for its own sake, that tends not to be creativity. Only when you get into the problem and the problem becomes clear, can creativity take over.
Charles Eames, Architect, Graphic and Industrial Designer, Filmmaker

A creative brief is a fundamental part of the design process and a key foundation upon which successful projects are built. Not only does the creative brief ensure that all parties understand the requirements, background and goals of a project, it helps to inspire ideas and develop an understanding of a project that would not have been possible otherwise.

If you are a client, a creative brief will outline your goals, and help you measure a project’s success. If you are a designer, a good creative brief is your best friend.

1 bản tóm tắt thiết kế là 1 phần cơ bản của quá trình thực hiện tk và nhờ vào 1 chìa khóa cơ sở sẽ giúp việc thk các dự án đc dễ dàng hơn .

nếu bạn là 1 khách hàng thì bản tóm tắt sáng tạo sẽ giúp tìm ra mục đích của bạn, và giúp bạn thu ngắn khoảng cách với 1 dự án thành công.còn nếu bạn là 1 nhà tk,thì bản tóm tắt sáng tạo là 1 ng bạn tốt.

The objectives of a creative brief

A creative brief doesn’t need to be (and shouldn’t be) overwhelming. An effective creative brief can be simplified down into three simple points:

bản tóm tắt sáng tạo ko cần cũng như ko nên quá mạnh. 1 bản tóm tắt sáng tạo hiệu quả có thể đơn giản bằng 3 điểm sau :

  • The Past (quá khứ)
  • The Present (hiện tại)
  • The Future (tương lai)

The Past (quá khứ)

The past represents everything that has already occurred, and has bought you to today. This point identifies the constants or known elements of any project. The past consists of the client details, the background of the project, the target audience, the competition, the market position, and the existing brand.

The intention of the past is to develop a solid understanding of the client, their business and the background of the project.

qkhu đại diện cho tất cả những gi đã xảy ra, nó mang bạn tới hiện tại. điểm này nhận diện những điều bất biến hay những yếu tố đcc biết đến trong mỗi dự án .Qkhu bao gồm các chi tiết của khách hàng, phần nền của dự án,các khách hàng mục tiêu, đối thủ cạnh tranh, định vị thị trường, và thương hiệu hiện có.

The Present - hiện tại

The present is today. The present is the reason you have been hired and why you are writing the brief: the present is the problem. The present consists of the intentions of the project, the objectives of the design and the problems that need to be solved, and sets the requirements by which the success of the project will be measured.

The present will identify the problem, and set out the objectives that the design will be built upon. Depending on the project, the present could be relatively simple, or quite detailed.

hiện tại là ngày nay , hiện tại là lý do tại sao bạn đc thuê và tại sao bạn đang viết bản tóm tắt : hiện tại là vấn đề.hiện tại bao gồm mục đích của dự án, các đối tượng của tk và các vấn đề cần pải giải quyết, và thiết lập các yêu cầu đòi hỏi thành công của dự án sẽ có cân nhắc .

hiện tại sẽ nhận ra vấn đề, và thiết lập ra các đối tượng thiết kế sẽ đc dựng nên.,tùy thuộc vào dự án, hiện tại có - thể tương đối đơn giản hay khá chi tiết .

The Future - tương lai

The future is the expected outcomes – essentially, the vision for the project. The future is not yet known and, as such, is somewhat variable. The future encompasses a number of aspects of a creative brief, including: the intended style, the budget, the project’s timeline, specific project requirements, sources of inspiration and references.

tương lai là những kq mong đợi - về cơ bản, tầm nhìn của dự án. TL ko biết trc đc, và là 1 chút có thể thay đổi đc .TL bao gồm 1 số khía cạnh của bản tóm tắt sáng tạo, bao gồm : phong cách đã định, ngân sách thời gian của dự án, thời gian hoàn thành d/a, các ycau cụ thể của dự án, nguồn cảm hứng và tài liệu tham khảo .

The future is very much subjective, and it sets the requirements and goals for the solution of the project. It’s important to note that a creative brief shouldn’t prescribe solutions, but just provide suggestions – the brief will be the basis for the designer to develop ideas of their own.

TL là

Using these three key points, you should be able to structure a brief of your own, regardless of whether you are the client or the designer. If you are a designer, it is important to gather as much knowledge as possible about the project first, so that the brief can be constructed properly.

Develop a Questionnaire - phát triển 1 bảng câu hỏi

Many designers (including ourselves) find it productive to provide a questionnaire to a client from which to develop a brief. A questionnaire is an effective method of gathering information because you can ensure you’re asking all the right questions to formulate a very specific brief.

rất nh nhà thk đang tìm kiếm nó để cung cấp 1 danh sách các câu hỏi danh cho khách hàng của họ đc phát triển từ bản tóm tắt.1 ds câu hỏi là 1 phương pháp hiệu quả để thu thập thông tin bơi bạn có thể đảm bảo bạn đang hỏi các câu hỏi cần thiết và thích hợp để xây dựng 1 bản tóm tắt .

A questionnaire doesn’t have to be boring and monotonous either – just keep it succinct and clear. With modern technology, it’s really easy to create something engaging and simple. You could use a word document, create an editable PDF, or even develop a web form. Just make sure that the fields you provide for answering your questionnaire are appropriate for the question.

1 danh sách ko phải là nhàm chán và đơn điệu, chỉ cần giữ cho nó ngắn gọn và rõ ràng .

In terms of structure, a questionnaire should cover the Past, Present and Future elements as previously discussed, but in more detail. For example, a typical website design questionnaire could be structured as:

  • Company Information (past)
  • Company Background (past)
  • Market Position (past)
  • Target Audience (past)
  • Brand (past)
  • Objectives (present)
  • Requirements (present)
  • Specific Information (future)
  • Style Information (future)
  • Reference Sites (future)
  • Budget * (future)
  • Timeline * (future)
  • Extra Information (future)

*If the project has already been approved, the budget and timeline would likely be scoped in the project proposal.

Each of the points above can set the structure of the brief, and you would likely get more specific by adding multiple questions within each criterion. However, there is no point getting too specific if it is not necessary for the project at hand.

Consider the depth

A wise man once tweeted: “If the brief in words is more than the budget in dollars, I raise my red flag.” (@maxvoltar).

A brief for a 3 hour business card design probably wouldn’t need a questionnaire or a 4 page brief – it may just require a telephone conversation or a couple of paragraphs in an email. Whereas a 4 month design and development project would likely need a lot more effort and structure to develop a full understanding of the task at hand.

Similarly, if a client sends a lengthy brief for a 2 hour flash job which would probably require half the budgeted time to read and interpret, there is obviously an issue with the agreed scope. This should be identified immediately and discussed with the client.

There is no right or wrong here, just consider the effort vs. the reward.

Summary

The creative brief is one of the most important tools for any designer or client – it will set the foundation for a project, identify its direction and contribute to its success.

Without a creative brief, you’ll be more than likely walking into a project blind. The aesthetic result may be outstanding, but without understanding the problem and nailing the requirements, the solution may have been a waste of your valuable time.

Regardless of the means, we are confident that by following the guidelines and methods described, you’ll be well on your way to developing a useful, structured creative brief that will guide you to success in your next project.

source : humaan.com.au

20 thg 5, 2011

Design And Develop A Complete Website (A Tuts+ Mini Series, Pt 2

Final Product What You'll Be Creating

This entry is part 1 of 2 in the Design & Develop A Complete Website Session - Show All
Next »

Today, in part 2 of this massive tutorial, we’re continuing this session with the second day of design. We’vealready designed the homepage – so now we’ll be designing the four support pages that form the rest of the complete site design (Portfolio, Blog List, Blog Post, and the Contact Form Page). Let’s dive in shall we?


About the Mini Series

You’ll find lots of web design and development tutorials out the net… but very few tuts that take you from start to finish. Lots of tutorials are only for design, and others are only for coding. Today we’re starting a new series where we’ll design and develop a complete website from scratch; We’ll take you from the initial wireframe to the full site design (including 5 pages). Then we’ll be coding the design (in Nettuts of course) and finally converting this complete XHTML theme to a working WordPress theme!

Check out the entire process as it happens at our Session Page!


Project Objectives!

Let’s briefly review our project objectives that we set up on Day One:

Our aim is to design and develop a simple site design with a modern layout that’s conducive to CMS systems like WordPress. We won’t be applying any wild and crazy style effects in our design (the point here is to keep it simple), but we are going to approach the entire process, from start to finish, as a study in layout and a proper use of margins and padding.

We’ll be using the 960 grid system from start to finish – and this won’t be any different for our Day Two design session.

A Brief Course Outline. We might break this up differently once we hit the coding phase, but this should give you a good idea of where we’re heading with this series:


Let’s Continue! Day Two of the Design Phase

Let’s start by taking a peek at what we’ll be creating:

Today’s design phase is also divided in four parts and we’ll design all the other pages of Iconify in this session. As we designed the homepage already, our primary task has been completed – so we just need to fill in the blanks for the rest of the sitemap.

This is a crucial step that’s often overlooked in lots of design projects, but designing some specifications for these support pages is something you won’t want to skip. Remember, a website design isn’t complete after just setting up the homepage – at the very least you’ll need a couple extra templates designed for the additional pages that make up a site.

As our layout is pretty straight forward, we’ll just be swapping out the primary content area for each page. The universal site elements (Header, Navigation, Footer) will all stay the same from one page to the next. This is important to keep a consistent foundation for the site so users always know where they’re at.


Part E: Design the Portfolio Page

The Portfolio Page is the first support page that we’ll design. Remember that we’re using the 960 Grid System for the entire site design, so we’ll be using the same basic layout and column structure as we setup on the homepage design.

Step E1: Basic Setup For Portfolio Page

Create a duplicate of the index.psd file and rename it to portfolio.psd. Open it up with Photoshop. Delete everything from within content layer group except the bg layer.

Now create the “breadcrumbs” and “notes” layers for the portfolio page. For the “notes” background shape, use the same layer styles as we did it for recent project‘s bar rectangle. Use image E – 1a as a guideline.

E - 1a

Next, we are going to use a simple technique to work in a handful of different column variations inside this one page for our portfolio items.

Step E2: Creating Portfolio Items

Use the image creation technique from Day One (Step C3) to create two column portfolio items as shown in image E – 2a. If you recall, we’re simply drawing in rectangles that fit the column guides, applying a layer style, and then cropping in images to create a subtle border effect.

Now repeat this same technique for three column and four column portfolio items. Use image E – 2b and E – 2c as a guideline. Note that we’re flipping between the different 12_column and 16_column guide layers to get this perfect. Finally, organize your layers as shown in image E – 2d.

E - 2a
E - 2b
E - 2c
E - 2d

Part F: Design The Blog List Page

The Blog List page is intended to be the location where “excerpts” of each blog post are shown. These “excerpts” are also called “loop” elements – and usually are comprised of a title, thumbnail image, a short text preview and some meta information (like the date, author, tags, etc.).


Step F1: Creating the Blop “Loop” Elements

Just like we did with the last page, we’ll start by creating a duplicate of portfolio.psd page and renaming it to blogs.psd. Inside the blogs.psd file, delete everything inside the content folder except bg,breadcrumbs, and pages layers. Now we have a blank blogs file, we can begin to populate it with some content.

For the first time we’re going to use a standard two column blog layout – one for content and another one for the sidebar. Use image F – 1a as guideline to design the blog and sidebar content – notice that we’ve placed the vertical separation line between two of the column layers so it’s perfectly spaced.

The actual designing here is pretty simple so we’re not going to go into too much detail – just follow the set rules for the type layers (the red text on the examples), and use all of the styles that we’ve already setup in our other pages. Take special note about the spacing between elements (also marked in red text) as that’s going to tell you exactly where to place everything.

When you’re done, organize your layers as shown in image F – 1b.

F - 1b

Part G: Design the Blog Single Post Template

Now that we have our Blog List page setup, we need a template for each full blog post. This is a pretty hefty page in terms of content because we also need to plan ahead for a commenting system and lots of other little details. Pay special attention to the example images in this section!

Step G1: Creating Blog Posts Page

Once again, start by resaving the blogs.psd file with a name of blog-post.psd. Inside blog-post.psd, delete all the blog list content so we can start fresh. In the content section, grab your text tool and start to populate with some text and image as shown in image G – 1a.

Step G2: Design The Popular Blog Post Box

Draw a rectangle and apply the same layer styles of recent project‘s bar from the index.psd file. Populate it with content and position as shown in image G – 2a. For the horizontal ruler styles please check image G – 2b.

G - 2a
G - 2b

Step G3: Design The Comments Section

Draw a rectangle with 630px width and any height for now. Name it bg and place it inside a layer group named comments. Copy the layer styles from popular post box’s bg, then paste to this layer. Use image G – 3a as a guideline.

G - 3a

For the comment boxes’ arrows, draw a triangle inside the comment box (enable Add to shape area while drawing) measuring 10X10px rotate the arrow and position them as shown in image G – 3b and apply the layer styles as shown in image G – 3b.

G - 3b

We are leaving a 40px left margin for the second comment to indicate that this is a reply. By using this same technique, we can go even more deep – showing a third, fourth, or even fifth reply depth by just indenting another 40px for each level. We’ll do the same in our XHTML version, so remember these basic style rules.

Step G4: Design The Comment Form

Draw another rectangle with same style as of comments‘s bg layer and name this layer bg. Place it inside a layer group named comment form. Use image G – 4a as a guideline.

G - 4a
G - 4b
G - 4c

Part H: Design Contact Page

Once more time, copy blogs.psd and paste it with a name of contact.psd. Open it in Photoshop. Delete everything except breadcrumbs and sidebar from content layer group. Copy comment form and paste it as shown in image H – 1a. Once again, type in the content as shown in the image.

You’ll notice that a lot of this is repetition by now – we’re just copy/pasting in content, fitting it to the guides that we want to use, and using the same typography and layer styles from the previous pages.

Things should be moving pretty quickly by the time you’ve finished this page. You can repeat this same basic process for as many pages as you need to mockup – just stick to the column guides and use the same basic typographic and layer-style rules for each new design and should be able to knock any more of these that you might need very quickly.


End of Day 2

This concludes the second part of our massive tutorial! By now, we’ve successfully designed our website. In the next session (coming soon over at Nettuts), we’re going to begin the coding process, so check back here (and at Nettuts) as we post the new portions of this tutorial!