test2

Test

This slideshow requires JavaScript.

為什麼要買廣角鏡？

The Design Process

If you were to ask me to design a bridge, I’d have a lot of questions. Is it going to span the ditch in your front yard or Lake Pontchartrain? Can I use concrete and steel, or does the entire creation need to be constructed with toothpicks? I certainly would stop short of taking your business card at a bar and promising you the Golden Gate before knowing more about who you are and why you think you need it. On the other hand, if you commissioned me to create a sculpture for your garden, I’d probably feel a lot more comfortable aiming to create a unique and artistic piece.

The process of designing a website falls somewhere between bridge building and sculpture. Yes, we want to create an individual site that’s aesthetically pleasing, but our highest priority should be to meet the needs of our client. These needs may be lofty and elaborate, or they might just be about making information available. If we fail to listen carefully, though, the entire project will come falling down, along with our reputation. The technical details of developing, hosting, and maintaining a website or application can be, well, technical. The process of creating a design comp, however, can be boiled down to just three key tasks: discovery, exploration, and implementation.

What’s a Comp? — The word comp is an abbreviation of the phrase “comprehensive dummy,” a term that comes from the print design world. It’s a complete simulation of a printed layout that’s created before the layout goes to press. In translating this term to web design, a comp is an image of a layout that’s created before we begin to prototype the design in HTML. Think of it as a mock-​​up.

Discovery

The discovery component of the design process is about meeting the clients and learning what they do. This may feel a little undesign-​​like, but gathering information about who your clients are and how they run their business is vital in coming up with an appropriate and effective design.

Before you schedule your first meeting with a client, spend some time researching their business. If they’ve asked you to design a website, they may currently be without one, but google them anyway. If you’re unable to find any information about their business specifically, try to learn as much as you can about their industry before the first meeting. Whenever possible, the first meeting with a client should be conducted in person. Sometimes, distance will dictate that the meeting has to occur over the phone; but if the client is in town, schedule a time to meet face-​​to-​​face.

Keep in mind that this meeting is less about impressing the client, selling yourself, or selling a website than about communication, and establishing just what it is the client wants. Try to listen more than you speak, and bring a pad of paper on which you can make notes. If you bring a laptop or tablet with you to talk about website examples, limit the time spent using it. Computers have screens, and people tend to stare at them; hence, if the client isn’t staring at the screen the whole time, you will be as you write your notes. If you must drag some technology into the meeting, use an app like iTalk Recorder for iPhone or Voice Recorder for Android devices to record your conversation — with the client’s permission, of course. In my experience, though, a pad of paper is less threatening and far less distracting to the often not-​​so-​​tech-​​savvy client.

Oh, and remember: client meetings don’t have to take place in an office. Even when I worked for a company in a big office, I had some of my most productive client meetings at a café or over lunch. The feasibility of this approach depends on the client. If your contact seems to be more the formal business type, don’t suggest it; in many cases, though, it’s a good way to make a business meeting more personal.

Here are a few of the questions I like to ask in initial client meetings, even if I’ve already established the answer myself via a search engine:

• What does the company do?
• What is your role in the company?
• Does the company have an existing logo or brand? What is your goal in developing a website?
• What information do you wish to provide online?
• Who comprises your target audience? Do its members share any common demographics, like age, sex, or a physical location?
• Who are your competitors and do they have websites?
• Do you have examples of websites you like or dislike?
• What kind of timeline do you have for the project and what is the budget?

If the project is to redesign an existing website, I also like to ask:

• What are your visitors usually looking for when they come to your site?
• What are the problems with your current design?
• What do you hope to achieve with a redesign?
• Are there any elements of the current site that you want to keep?
• How do you think your visitors will react to a new site design?

Sometimes I start off with more questions than those listed here. Use your imagination and try to come up with some creative queries that will really give you more insight into the client’s organization. If you’re a programmer, avoid the tech jargon. If you’re a designer, avoid talking specifically about design. Sure, that may be all you’re thinking about, but semantic markup, fluid and fixed layouts, and color schemes will likely mean very little to the client. Worse still, these types of conversations can bring misguided design opinions your way before you have a chance to start thinking about the design yourself.

Exploration

The next stage of the design process is to take the information you’ve learned from the client back to your laboratory for analysis, dissection, and experimentation. You want to gain a grasp on all the information, products, and services they have to offer, and play around with how these should be arranged. Put yourself in the shoes of the website visitors and ask yourself what these people are looking for. If you’re thinking about buying a product, what do you need to know before you buy? If you’re signing up for a service, where would you learn about the different offerings and which level of service you need? What is the clearest title possible for page x, and how many steps does it take to reach page y?

In the world of web design, this is the beginning of a process known asinformation architecture, or IA for short. For expansive websites and complex web applications, information architecture is a career unto itself, but the guiding principles of this field can provide a solid foundation for even the smallest websites. For the exploration stage of our process, we want to focus on organizing the content and flow of the website into a structure we can design around.

Two of the most essential tools for this task are scrap paper (or a whiteboard if you have one) and a big pad of sticky notes. Make a list of all the bits and pieces of the website and start arranging them into groups and subgroups. These are likely to move around quite a bit, and that’s where the sticky notes come in handy. If you make a note for every section, subsection, and page of the site, you can arrange them on a wall in the order they’ll appear in your site’s navigation. You’ll want to avoid overwhelming the visitors with too many options, but you also don’t want to bury information too deeply within the site; that is, too many clicks away from the home page. There are no hard-​​and-​​fast rules for this activity; just make the information as obvious and as easy to reach as possible.

Implementation

Now that we’ve thought through how we want to organize the information we’re working with, the implementation step of our design process begins with creating a layout. Regardless of the project, try to avoid being caught up in the technology associated with building websites — at least at first. At this point, it’s unimportant whether the site is going to comprise straight HTML, a template for a content management system, or a Ruby on Rails application; the bottom line is that we have an interface to design and a blank sheet of paper. “Paper?” That’s right, paper. Did you really think I was going to let you go back to your precious computer already? No way. Here’s why: it’s easy to lose focus on the design if you start thinking about the layout in front of a computer. If you start out on paper, you can ignore the technical limitations of browsers and CSS, and focus on how you want the final product to look. Now you might think that all good designers carry around fancy hard-​​bound sketchbooks in which they use expensive markers and paintbrushes to design Da Vinci-​​esque renderings of potential web page layouts. For my part, I use a 79-​​cent spiral-​​bound notebook and any writing instrument I can find on my desk that still works.

Fig. 1, One of many sketchbooks available for layout sketching (this one is from webdesign​-sketchbook​.com). Plain paper works perfectly fine too.

I start out by sketching a few possible layouts. After I’ve produced a few, I decide on one I like, jump into Photoshop, and use the rectangle tool to block out the areas I’ve marked down on my paper. Once I’ve defined my layout, I experiment with foreground and background colors until I have a solid color scheme. I continue twiddling the Photoshop knobs and pushing around pixels until, finally, magically, I have a comp to show the client.

Simple, right? Okay, perhaps I skipped a few steps in that brief description. Honestly, though, when people ask me how I do what I do, they usually receive a similar explanation. The truth is that there are bundles of now-​​subconscious information from my past experience and those old college design and art classes that have helped me to define my own design process.

Learning how to design is like learning how to program. Some people have a bit of a knack for it, but anyone can learn. Just as there’s good code and ugly code, there is good design and ugly design. Learning some of the principles and conventions associated with design will help you to understand the difference between the good, the bad, and the ugly, moving you towards establishing your own design process.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book(the second edition of which is out now). This is in fact the start of the first chapter, which we’ll continue shortly as it examines layout and composition.

If color is your thing be sure to check out the existing digitization of the color chapter here on Design Festival.

By Jason Beaird

Creating Typographic Logos

When you’re getting started with logo design it can be helpful to think about the categories that logos fall into. These are:

• typographic
• type and symbols
• symbol only

Here, we’ll take a look at the first category, typographic logos.

Typographic logos or wordmarks are logos made entirely from type. They suffer from the misconception that they are very quick to throw together and that their design doesn’t require any skill. This is absolutely not the case. A logo designer needs to address questions such as “who is the client” and “who is the target audience.”

While it can seem straightforward to simply use a company or individual’s name on the logo, the typography must be of a high standard or it will look amateurish. Good typography means choosing a suitable typeface (or making a bespoke or proprietary typeface), looking after word spacing and letter spacing. The letterforms should be considered for their shape and legibility. Remember also that a font that may be trendy now can look dated very quickly. Classic typefaces are “classic” for a reason.

An advantage of typographic logos is that the mark is recognizable. There must be hundreds of logos featuring symbols of globes, swooshes and other meaningless shapes but there can be no mistake made when the logo consists of a type treatment of the company name. A disadvantage is that type only logos can look generic if not handled professionally.

Famous Typographic Logos

Here are a few examples of some well-​​known typographic logos.

Below you can see two logos created using a stylized script typeface. They clearly are two very different types of company with two very different target audiences.

 

Marks and Spencer and Calvin Klein both use a clean sans-​​serif typeface.

 

White text on a red background, anyone ever had a pair of jeans made by either of these companies?

 

What are your favorite typographic logos?

By Jennifer Farley

David Airey’s Tips for Logo Design

• Jennifer Farley
• 19^TH Jan 2011
• Logo Design
• Inspiration

The logo is the visual heart of a brand. The most memorable quote that can also pass as the most important “tip” for logo design is attributed to Steven Gilliatt: “A logo should look just as good in 15-​​foot letters on top of company headquarters as it does one sixteenth of an inch tall on company stationery.”

What is true for the real world applies successfully online, but the Internet, with all its dynamic technologies, gives more flexibility when it comes to logo design. The trend for the coming year distances itself from the 3D effects, shines and shadows of the Web 2.0 logos, and goes in a direction where less is more and more is spectacular, breathtaking, unique.

Coming years will see logo designs influenced by an escalating technology and innovation. Black and white printing is no longer mandatory, and the new logos no longer need to translate well in grayscale. The Web companies will need bold logos, types of logos that are refreshing and stand out, enhancing brand visibility and user response. But trends come and go, and in the end only the quality stands. Here are five logo design tips from one of the best logo designers in the UK – David Airey.

1. Make it memorable, timeless, scalable and appropriate

Experienced logo designers don’t always agree with the concept of “trend.” They say that good design is not trendy design, and that logos should be iconic and timeless, regardless of if they were produced for the web or for print.

“Regardless of whether a logo is seen online or off, they act as identifiers.”- says David Airey. “They help your target audience associate the product or service with you. A well-​​designed logo will also express qualities appropriate to the business, such as expense, trustworthiness, a sense of fun, etc.”

2. Make it recognizable across all media

Are “web logos” different than offline logos? We know that the answer is “yes” – the glossy “Web 2.0” trend is the proof, but these are too common now. Will the new logos be dynamic, or will the trend follow the “avatar” and “favicon” concepts and lead to a generation of pictographic logos? So what will make a good Website logo? Designer David Airey answers:

“It depends on the company. Some logos can be designed to allow for a level of animation. This can be shown online, or on TV advertising, but not in print. Ultimately, the logo should be equally recognizable across all media.”

3. If it ain’t broken, don’t fix it

Already an industry standard, logos are almost always placed at the top left of a web page. This probably won’t change in the immediate future. “If it ain’t broken, don’t fix it” as they say.

“Stats would suggest the top left, as this is where most web users look first — unless of course you have a huge flashing image in the middle of your website, which I don’t recommend,” says Airey. “My logo can be found in the top left corner of my own website, but if someone can suggest a better position, I’m always open to ideas.”

4. Avoid monotony

Good logos are timeless – like Philips, Nike, BMW, etc. But when it comes to how these blend with the colors of the websites they are placed on, there is always an element of surprise. The logo stands by itself, as a powerful identifier, but the design of the site adds colors that appeals to its viewers. People are visual beings, and monotony is categorically not something that triggers positive response.

“You want to keep a level of consistency, so a monotone logo lends itself well to a monotone website, perhaps with a dash of color to accentuate the appeal.”

5. A logo is not a person

Brand enforcement campaigns lead sometimes to desperate measures: companies use logos to create social media profile avatars, they even use brand names to name their social media profile. The last is not so bad, but using a logo for an avatar is cold, impersonal, distant… There’s a time and a place for everything: corporate social profiles should not be created wearing the mask of the brand.

However, where social media is concerned (Twitter, Facebook, etc.), my personal preference is to use a photo in your avatar, rather than your logo. This gives an increased sense of personality, and reinforces the fact that you’re actually a human, and not one of the ever-​​increasing ‘bots’ that spring up.

What about you? Do you have your own logo? Would you consider creating a logo for your name and using this logo to promote yourself as a brand? What trends do you think we will see in the coming years? Do you have any tips to add to the list? Come on, let’s talk!

This article was originally published on DesignFestival on the 28^THFebruary 2009.