Các nhà nghiên cứu khoa học từ lâu đã khẳng định sự tác động không nhỏ của màu sắc lên tâm lý của người sử dụng. Không cảm thấy ngột ngạt với nhịp sống hối hả và khói bụi của thành phố, mà ngược lại, những màu sắc nếu được sử dụng đúng chỗ sẽ làm bạn như đang sống giữa thiên nhiên thuần khiết, hiền hòa…

+ Màu của truyền thống:

Sự rực rỡ của những bông hoa màu đỏ trong vườn, sự sinh động của quả cà chua hay quả dâu, sự óng ánh của màu rượu vang sẽ luôn là nhân tố kích thích tinh thần của bạn.

Màu đỏ tượng trưng cho sự tươi trẻ và thanh khiết. Khi sử dụng màu đỏ làm màu chính cho ngôi nhà bạn sẽ có cảm giác sang trọng và ấm áp. Những người yêu thích màu đỏ là những người đầy năng lực, đam mê và độc lập.

+ Màu của sự tươi trẻ:

Màu cam đem đến nguồn sinh lực dồi dào, những cảm xúc sâu sắc của sự ấm áp. Trang trí ngôi nhà của bạn bằng màu cam tạo ra bầu không khí tươi vui và xóa tan cảm giác lo lắng. Ý tưởng sự kết hợp giữa màu cam và màu vàng mang lại sự vui vẻ và cảm giác dễ chịu. Những người thích màu cam là những người năng động, vui tính và hướng ngoại

+ Màu của sự sang trọng:

Màu vàng tượng trưng cho quý phái và sang trọng. Nó mang đến cho bạn cảm giác được khám phá và tràn đầy hi vọng. Sự rực rỡ của những bông hoa hướng dương biểu hiện đầy khí lực và sự sống.

Trong khi đó, một biển vàng lấp lánh dưới ánh nắng mặt trời cung cấp tinh thần lạc quan tuyệt vời.Thể hiện ý tưởng màu vàng cho ngôi nhà của bạn là thể hiện sự hạnh phúc tựa như những tia nắng ấm áp của mặt trời. Nó mang sức sống cho thiết kế của bạn. Màu vàng cũng nhấn mạnh sự tập trung. Những người ưa thích màu vàng là những người đam mê sự khám phá, nhạy cảm, thông minh và đầy nhiệt tình.

+ Màu của sự sống:

Màu xanh là màu nối kết với sự sống của trái đất, cung cấp cho bạn sức trẻ và năng lượng. Một ngôi nhà màu xanh cung cấp cảm giác dịu mát và thanh thản cho bạn. Khi bạn cảm thấy mệt mỏi, một không gian xanh của thiên nhiên sẽ làm hồi sinh các giác quan của bạn.

Những người yêu thích màu xanh là những người chân thành, rộng lượng và thân thiện.

+ Màu của hòa bình:

Màu xanh da trời và màu rực rỡ của những bông hoa trong mùa hè tạo thành khung cảnh hài hòa và tươi mới. Màu xanh khuấy động tinh thần khám phá.

Sự kết hợp một cách hợp lý các đồ trang trí màu xanh da trời sẽ tạo được một không gian thanh nhã và yên bình. Màu xanh tạo ra cảm giác rộng rãi cho không gian ngôi nhà bạn vì phản chiếu của ánh sáng.

Những người ưa thích màu xanh là những người nhạy cảm, có năng lực, sự quyết đoán và khả năng tập trung cao.

+ Màu của sự huyền bí:

Màu tím tượng trưng cho sự thanh lịch và huyền bí. Trong thiên nhiên, màu tím có thể được tìm thấy trong hoa oải hương, hoa vilolet và trong những buổi chiều tà.

Màu tím lôi cuốn sự sáng tạo, cảm giác lãng mạn và tăng thêm tính tinh tế cho thiết kế của bạn. Người thích màu tím là những người lãng mạn, sáng tạo và có năng khiếu bẩm sinh về âm nhạc, hội họa.

+ Màu của tự nhiên:

Màu nâu là màu duy nhất trong bảng màu mang tính tao nhã của thiên nhiên, mang lại cảm giác hòa bình và thoải mái. Những sắc độ khác nhau của màu nâu có thể tạo ra những thiết kế khác nhau trong ngôi nhà của bạn.

Người yêu thích màu nâu là những người kiên quyết, đáng tin và nghiêm nghị.

+ Màu của lãng mạn:

Ngọt ngào và thi vị, màu hồng mang lại những điều ngạc nhiên thú vị và tượng trưng cho sự tự tin và tích cực. Sắc độ khác nhau của màu hồng có thể làm nảy sinh những cách nhìn khác nhau cho ngôi nhà của bạn, mang đến cho bạn năng lượng cao hơn, lôi cuốn cảm giác lãng mạn và cảm giác dễ chịu. Những người yêu thích màu hồng là những người lãng mạn, phóng khoáng, sâu sắc…

H.TR. (theo tư vấn của Nippon Paint)

5 ways to improve your site via your Global Configuration file:

1. Content >> Unpublish the PDF and Print options. These generate duplicate content problems in Google and may delay your SEO success.
2. Server >> Use Server Defaults. Setting this to 777 or 775 creates a big security hole on your site.
3. Metadata. Don’t overload here. Keep it to a maximum of 6 description words and keywords. These will show on every page and you want to allow each page to have its own keywords.
4. Cache. Turn cache on from Global Configureation-> System. Your site will run faster. The cache function saves copies of the web page as file so that users don’t have to load your whole page and make many database connections every time they visit.
5. Statistics. Turn them off! They’ll slow your site performance down. Go and get Google Analytics instead. Click here to see how to insert Google analytics to your joomla site.

Nhận thấy có nhiều bạn chưa biết cách tách nhân vật ra khỏi nền mà không mất đi những chi tiết nhỏ như tóc,…. mình xin hướng dẫn tách hình nhân vật ra khỏi hình nền dùng channels
Đây là hình ảnh cần tách:

Đầu tiên các bạn vào phần Channels,nếu chưa có thì vào Windows->Channels. Sau khi đã xem các channels ta thấy kênh blue là kênh mà mái tóc có độ tương phản cao nhất.Ta nhân đôi kênh blue và nhấn tổ hợp Ctrl + L để mở kênh Levels.Chọn như hình để tăng độ tương phản của mái tóc

The menu is developed in script.aculo.us and as I have mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu. I have some more ideas for the menu and once I have implemented those I will post on here again with full documentation.  I have really put it up here for now to hear peoples comments.

Screenshot

download: http://www.andrewsellick.com/examples/tabslideV2-mootools/tabslideV2-mootools.rar

Chuyển đổi Template từ Joomla! 1.0.x sang 1.5.x chủ yếu chỉ thực hiện việc thay đổi nội dung trong một số tập tin của Template.

Các thay đổi trong index.php:

• Thay _VALID_MOS bằng _JEXEC
• Thay $mosConfig_absolute_path bằng $this->baseUrl
• Thay $mosConfig_live_site bằng $mainframe->getCfg( ‘live_site’ )
• Thay các dòng lệnh hiển thị chữ echo ‘Hello’ cố định bằng bằng dòng lệnh echo JText::_( ‘Hello’ ) có thể chuyển ngữ được.
• Thay mosGetParam bằng JRequest::getVar. 
  Thí dụ: Thay $id = mosGetParam( $_REQUEST, ‘id’, 0 ); bằng $id = JRequest::getVar( ‘id’, 0 );
• Thay mosShowHead(); bằng
• Thay mosMainBody() bằng
• Thay mosLoadModules( $position_name, $style ); bằng <jdoc:include type=”modules” name=$position_name style=$style />
• Thay các kiểu ($style) Module của 1.0.x tương ứng với 1.5.x:

-1 => none 
0 => table 
1 => horz 
-2 => xhtml 
-3 => rounded

• Thay thành
• Thay thành countModules(‘$position_name ‘)) : ?>
• Thêm dòng khai báo css của Joomla! vào giữa cặp thẻ (chung với css của Template)
• Thêm dòng lệnh hiển thị các thông báo của Joomla! đặt tại vị trí nào tùy ý (thường được đặt phía trên phần nội dung chính)
• Ngoài ra cần phải lưu ý là Joomla! 1.5.x sẽ tự động nạp sẵn 2 Javascript trong Template thông qua dòng lệnh , nếu Template cũ có nạp các Javascript này thì khi chuyển đổi không cần đến nữa.

• Thay bằng
• Thay bằng
• Khai báo các vị trí Module ($position_name) được sử dụng trong Template.
• Thêm các thông số của Template vào nếu có.

• Xem xét tập tin template_css.css để thêm bớt nội dung cho phù hợp với Joomla! 1.5.x (mở tập tin template.css của các Template 1.5.x khác để tham khảo).
• Đổi tên tập tin template_css.css thành template.css

Trên đây chỉ là các bước cơ bản để chuyển đổi các Template thông thường, đối với một số Template được thiết kế có nhiều chức năng thì phải chuyển đổi thêm các chức năng này.

www.buaxua.vn

News websites can be intriguing to examine from a design perspective. Regardless of what type of news they cover, they all face the challenge of displaying a huge amount of content on the home page, which creates plenty of layout, usability and navigational challenges for the designer. The lessons that can be learned from examining how news websites address these challenges can be valuable for designers who work with other types of websites, including ones with blog theme designs.

Monetization is also a major factor for news websites, and it’s interesting to see how they integrate advertisements in the design. In some cases, the ads are somewhat intrusive or excessive, but most news websites are able to use ads without turning readers away, in part because of the content that’s available.

For the purposes of this article, the term “newspaper website” refers to any news-related website that has the editorial focus of an online periodical. Many of the websites mentioned here are the online versions of major newspapers, but others are standard news websites and some blur the line between news website and blog.

You may want to take a look at the following related posts:

• Award-Winning Newspaper Designs
  This post is supposed to provide you with some examples of outstanding newspaper designs which have been rewarded with prestigious awards (see references at the bottom of this post), and demonstrate unusual approaches of newspaper design.

Common Trends of Newspaper Websites

1. Color Schemes

Most news websites use dark text on a white background. Obviously, these websites contain a huge volume of content, and readability is important. A few of the websites mentioned later in this article use darker colors for headers or for the body of the page outside the content.

A large percentage of news websites also use blue and red in addition to a dark gray or black for text. Blue is extremely common for headlines, article titles and links. Red is often used sparingly as an accent color. Some news websites also mix in more colors in other places, such as in the navigation.

The L.A. Times website demonstrates a common color scheme:

2. Header and Sidebar Banners

Of course, all of these websites need to produce revenue, and banner ads in headers are a key source of income. Some websites use banner ads on all pages, and others exclude banners on the home page but display them above the header on other pages.

While blogs commonly use 125 by 125 pixel banners in sidebars, news websites commonly use 300 by 250 banners or tall skyscrapers. Many of the websites mix in some AdSense or other text link ads.

The Telegraph uses a 730 by 90 pixel banner over its header.

3. Top Navigation

Although there are a few notable exceptions to this trend, most news websites put their primary navigation menu just below the header and above the content. The New York Times and MSNBC are two of the exceptions, as they both use the left sidebar for the main navigation.

The Times Online uses a two-level navigation menu.

4. Tabbed Content Areas

Many news websites use tabbed content areas that allow visitors to see popular articles, recent articles, most commented articles, etc. This is sometimes used in the sidebar, and other times in the main content area, such as on Wired. This allows for more control by users over what content and links they see, and it can save space in the design by making more content accessible in a specific area.

5. Grid-Based Layouts

Newspaper websites are commonly built with grid-based designs. The grid is a popular choice not only because of the sharp look it creates but because it’s one of the most effective ways to manage and organize a large amount of content. The New York Times has one of the more well-known grid-based layouts.

Notable Differences Between News Websites and Blogs

The line between a news website and a blog is a fine one, and the two types are difficult to distinguish sometimes. For the purpose of this article, “blog” refers more to a traditional blog than to a commercialized news blog by a team of writers. While there are certainly similarities between blogs and news websites, there are also some key differences.

Social Media Integration

Seeing widgets or voting buttons on blogs is extremely common; in fact, most blogs use them in one form or another. Most news websites, however, use them more subtly, if at all. It’s common to see a “Share” section on articles, such as the one shown below from ABC News, but voting buttons are not used in quite the same way as on blogs, where a standard “Digg This” button may appear at the top of every post. A growing number of news websites recognize the impact of social media, but they are still using such tools subtly in their designs.

A few websites shown in more detail below do make more use of social media than others. The Huffington Post has a section specifically to display stories that are new on Digg, and the website certainly makes plenty of front page appearances.

RSS Feeds

Subscriptions and RSS feeds are a huge part of blogging, and most blogs use large icons or FeedBurner counts to make it easy for visitors to subscribe. Most news websites, however, don’t push RSS feeds on readers like a blog would. Most news websites do offer feeds, often according to category of content, but they’re not a major part of the design or layout. In fact, most visitors probably don’t even notice the small icons or links to feeds. As RSS feeds become a part of the daily lives of average readers, this will probably change.

The Guardian promotes a link to its feed in the website’s header, but with much less attention drawn to it than most blog themes.

Comments

Reader comments and discussion are a critical element for most blogs, but they’re not as important to news websites. Many news websites allow readers to leave comments, but they’re usually an afterthought in the design and are rarely promoted the same way as they would be on a blog. For example, many blogs show excerpts of posts on the front page, and almost all will also show a comment count with the excerpt that links to the comment section. This is used on a few news websites, but it’s rare.

ABC News is one of the rare news websites that shows a comment count by the post excerpt on the home page.

A Look at 20 Leading Newspaper Websites

The Onion
Satirical news website The Onion features a grid-based design (it’s been called the funniest grid you ever saw) that makes excellent use of the screen space that’s available. There is a lot going on on the website, which can be both good and bad. The main navigation separates the content into video, radio, sports, election, etc.

The header includes an ad on each side, and the sidebar has some advertising as well, but nothing too intrusive. Some parts of the home page are used essentially as advertisements for features that are part of The Onion, such as The Onion Personals and The Onion Store.

New York Times
The website of the New York Times is another well-known grid. The majority of the website’s navigation is down the left side of the page, which is not as common as top navigation. The website does use a tabbed navigation bar at the top with links to such features as “Today’s paper,” “Video,” and “Most popular,” but all of the content category links, such as World, U.S., Politics, Business, etc., are down the side.

The website’s design includes a nice use of blue and black headers and links, with a touch of red added in a few places, such as the time of an article’s publication. Overall, the New York Times presents one of the better newspaper websites.

Chicago Tribune
Unlike many of the other websites featured here, the Chicago Tribune uses only one small banner in the header of its home page, although individual article pages use a 730 by 90 banner. Aside from the header, the rest of the home page is fairly ad-heavy, including text link ads.

The content on the Chicago Tribune website is spaced out a bit more than, for example, the New York Times’. Again, blue is used for headers and links, with a touch of red.

Washington Post
The Washington Post also uses the common colors of blue, black (or dark gray) and red on a white background. The header includes a small 290 by 45 banner, and the top of the sidebar includes a 300 by 250 banner. The rest of the home page contains only a few other small banner ads.

The layout of content on the home page is focused on providing categorized links to specific content. An image is included for the lead story, but other headlines above the fold do not have thumbnails. At the top right, there is a section for the most-viewed articles.

Los Angeles Times
The L.A. Times website takes a different approach with its header than some other news websites. There is relatively little going on there, with plenty of unused space that could be filled with ads, something that most other news sites are doing. The rest of the home page uses only two 300 by 250 banners and a few text link ads. Individual article pages use a 730 by 90 banner above the header.

The content of the L.A. Times home page is contained in a grid-based layout, with primary navigation on the left. Again, blue, black and red are the colors of choice for text, links and headlines.

Tennessean
The Tennessean isn’t one of the largest newspapers in the U.S., but its website is worth noting. The Tennessean breaks some of the norms of the other websites that have been examined so far, primarily in terms of color. A dark orange is used for headlines and links, instead of a more common choice, such as blue. Additionally, a green background color is used on the sidebar.

There is a 300 by 250 banner in the sidebar and a skyscraper in the left sidebar, with more ads at the very bottom of the page. Individual article pages include a 730 by 90 banner above the header.

Houston Chronicle
The Houston Chronicle packs a large number of headlines onto the home page, including in the top center of the layout. This means there are more links to content above the fold, but each of them stands out less than it would on a news website that uses more thumbnails.

The website has no ads in the header of the home page, but has a few banners in the right sidebar and some text link ads at the bottom of the page. Article pages have a 730 by 90 banner above the header.

USA Today
The USA Today uses more color than many other news websites, particularly in the navigation menu and with links throughout the website. Category links for feature articles, such as sports, markets, education and people, all use different colors, which help them stand out.

Unlike most news websites, the USA Today shows the number of comments on articles right by the headlines on the home page. Only a few smaller banners are located on the home page, aside from a 730 by 90 banner at the very bottom of the page. Individual article pages are much more ad-filled, and at times while navigating through the website you may encounter a full-page ad that you have to skip to get to the content.

Mail Online
British news website Mail Online uses a more colorful design than many other news websites. The headlines and links are a lighter blue than those on the New York Times or Chicago Tribune websites, and they turn red on hover. The right sidebar includes tons of thumbnails from recent posts and colorful headers and roll-overs.

The website includes AdSense ads in the header and various ads throughout the rest of the layout, including some in the middle column. The grid layout keeps the content organized and makes use of virtually the whole page, which is incredibly long.

Telegraph
Another leading UK news website, the Telegraph, uses a nice, clean grid-based layout. Above the header is a 730 by 90 banner, and the only other advertising on the home page is a 300 by 250 banner and a skyscraper, both in the right sidebar.

The home page design makes extensive use of thumbnails to go along with article headlines and brief descriptions. Blue and red are used for headlines and links. The main navigation is located at the top of the page.

Guardian
The Guardian uses a clean but colorful design. The main navigation at the top of the page consists of various colored links to different sections of news. The home page uses little advertising, but individual article pages include a 730 by 90 banner above the header of the page, and 300 by 250 ad at the top of the sidebar.

Headers on the Guardian website are a common blue, but colorful borders are used to add some visual appeal. Thumbnails are used in several spots on the home page, but most stories have only a headline and brief description or just a headline.

Times Online
The Times Online is one of the few news websites to use a bright color in its logo/branding area, but it does accomplish the goal of distinguishing the website. Above the header is a 730 by 90 banner.

The home page uses a two-level navigation menu above the content and a fairly typical blue color for headlines. Several article excerpts on the home page include thumbnails, but there are no large images for featured articles as there are on many news websites.

MSNBC
MSNBC stands out among other news websites due to its dark yet colorful header, a look that’s been imitated by many Photoshop users. The header includes no advertisements, and in fact there is only one ad visible above the fold. Text link ads are used in a few places throughout the home page. Individual article pages do include a 730 by 90 banner above the header at the very top of the page.

Overall MSNBC is a very well-designed website, with an attractive color scheme and a layout that’s well-structured but not overly cluttered. Like the New York Times, MSNBC uses the left sidebar for its primary navigation.

ABC News
ABC News features a dark header that helps distinguish the website from other news leaders. There is relatively little advertising on the home page. The right sidebar contains a 300 by 250 banner and the only other ads are at the very bottom of the page.

At the top right of the page there are three current videos, plus a link to more video content. While other news websites include video, most don’t place videos as high on the page as ABC News does.

Ars Technica
Tech news website Ars Technica has a vastly different design than mainstream general news websites, which should be expected. Unlike the image-heavy general news websites, Ars Technica does not use thumbnails on its home page. Additionally, the article pages have very few images in comparison to general news websites.

The website uses tabbed navigation at the top of the page to take visitors to different categories of news, such as Business, IT, Apple, Hardware, etc. The header includes a 730 by 90 banner, and the top of the right sidebar includes a 300 by 250 banner ad. Further down the sidebar is a skyscraper banner.

CNET News
Tech news website CNET News uses a fairly basic design with a dark header, a featured content area, and a long list of headlines with brief excerpts. Blue and red are used for headlines and links.

The header includes a small text link ad on the right side of the screen and a few 300 by 250 ads in the sidebar. No additional ads are used on individual articles.

TechRadar
UK technology news website TechRadar includes a few items that currently aren’t very common on other news websites. Just above the content of the page, there is a “TechRadar Update” section that scrolls through links to the most recent content. Additionally, there is a featured content area that rotates through the six leading stories. Below the featured content area is a grid of the latest news headlines with brief excerpts.

The website header includes a 730 x 90 banner, and the sidebar contains some other banners and text link ads. The navigation on TechRadar is a bit different as it uses tabs for news, reviews, blogs, and forums.

Wired
The design for Wired is rather unique. Most notably, thumbnails, headlines and excerpts of featured content reside above the main navigation menu. Thumbnails are used below for the most recent article in each of seven different categories.

The header includes no banners, just an internal advertisement for WiredBiz. The sidebar contains a few ads as well as additional monetization through a job board widget that links to recent job postings on the website’s job board.

The Huffington Post
The layout and design of individual pages on The Huffington Post is quite different than that of the home page. On individual pages you see a small logo/branding area at the top left, with a very long banner on the right that takes up most of the width of the page. Advertisements throughout the rest of the page are fairly minimal.

On the home page, most of the area above the fold is used for a headline and image from a featured article. The rest of the home page includes a lot of images and headlines, as well as post excerpts from a variety of writers in the left sidebar.

Sporting News
The Sporting News has one of the most outdated designs. The header is used primarily for displaying scores, but with less space efficiency than other major sports websites. Above the header is a 730 by 90 banner.

Much of the real estate of the sidebar is used for directing visitors to other sections of the website, such as Sporting News Radio, the Blog Network and community blogs.

Download Photoshop file

Preview

Here is a preview of the final image:

1. Notepaper stock image

First you need to find a notepaper stock image. You can buy stock photo from iStock or scan from a notepad.

Cutout the notepaper and apply 2px drop shadow effect.

2. Watercolor effects

Cmd + click on the notepaper layer to load the selection. Create a new Layer Group and click on the Add Layer Mask mini icon in the Layers palette. This way everything within the Layer Group will be masked.

Create a new layer. Choose a pink color (or any pastel color), select the Pencil tool, set the tool Opacity to 10%, brush size 100px, and drag around the document as you are doing a watercolor painting.

Repeat this step until you get multi layers of watercolor effects.

3. Add details

Find some coffee stain images, paste it in and set the layer blending mode to Multiply.

Dirty and splatter effect: download and use the splatter or watercolor Photoshop brushes from Bittbox.

Add some pencil sketch illustrations. You can either scan your marker sketches or use vector illustration.

Make a triangle selection in the corner, pick a grey color and apply a gradient to make the wrinkle effect.

4. Hand wrting text

If you don’t have any nice hand writing fonts, go to Dafont or Urban Fonts to download them. Create a new Layer Group and enter the navigation text.

Find a different font, enter the menu mouseover text.

5. Washout RSS icon

Use the Eraser tool, choose one of the splatter brushes, set tool Opacity to 10% and randomly erase the edge. Then paint some brown color overlay the icon to give the dirty effect.

6. Sketchy strokes

Sketchy or pencil strokes can be easily created in Adobe Illustrator. Draw a shape or path, open the Brushes palette, click on the charcoal brush and set the Stroke weight to 0.25pt.

7. Final

Here is my final image. If you want to spend more time on the details, you can add paper clips, tapes, post note, pencil sketches, etc.

Unless your site is literally a crude hierarchy of dumb data, Information Architecture isn’t about inert structure.

People don’t work like computers. We are social beings, our brains have evolved to adapt to a social environment. Whereas computers are very good at doing calculations based on strict rules and hard numbers, humans are very good at discerning meaning based on soft rules and using complex and incomplete information.

In order to survive, our species has learnt to communicate effectively using rich verbal and visual language. We’ve also learnt to interpret subtle clues from our environment to establish we’re most likely to find what we want, and to avoid danger.

For the vast majority of sites, I think of IA in terms of “information in motion through dialogue”.

Information in motion through dialogue

When using a web page, we don’t carefully analyse its whole structure and decide the best route forward; we use our age-old survival skills to guess where we might find success. We don’t always think logically, we move backwards and forwards, and we behave differently according to our context.

All this time, there is a mental conversation running in our minds. Very often when observing people using computers you’ll hear them talk to the computer (spot if you do this yourself).

These common phrases are just a small audible portion of the mental conversation that we all run all the time when using computers. We’re having a dialogue with the computer, because that’s how we work.

The key to designing websites for people to use successfully is to design them for the way people use websites. Because people use dialogue to communicate, a good way to plan your site is consciously to design it to be effectively usable through dialogue.

The site persona

You’ve already created primary personas that you’ll use to represent your real visitors in the dialogue. I use another type of persona to represent the personality of the site itself. The dialogue process uses communication between visitor personas and the site persona.

A site persona is your model for the site’s personality. It helps you visualise how a site should respond to user input and to exceptions, what tone of voice it uses to communicate, how much assistance it offers and when.

Pierre

One model for site personas that I use frequently is Pierre, who is an imaginary concierge at a high-class hotel. He’s the complete professional, completely devoted to one simple goal: his visitors’ satisfaction.

When he does his job right, his visitors get what they want quickly and easily, which leaves them happier and more relaxed. When that happens, he’s happy. He also gets very well rewarded, because he’s the best in the world at what he does, and he deals with very important people.

What you’d notice about the way he does his job:

• Pierre is always professional and to-the-point. If you ask him something, he responds instantly with his complete attention. If he asks you a question, it’s polite and phrased so that you’re totally clear.
• Extremely succinct. Interacting with him always takes the fewest possible words to ensure absolute clarity. Because he understands his clients’ typical requests and needs, he often knows more about what they need than they do at a particular moment in time (particularly when they’re busy and tired from travelling).
• He doesn’t draw attention to himself, and takes no glory. When someone’s impressed with his work, he smiles modestly, happy that the customer is happy.

Who’s your site persona?

Other site personas might be based on:

• A trained counsellor
• A personal assistant
• A bookstore salesperson
• A customer service representative (who’s also a domain expert)
• A best friend

The most important thing about your site persona is that they can represent the characteristics of the site’s brand. If you don’t yet know what the site brand should project, now is the time to find out. Either speak to the site owner or their marketing chief, read brand guidelines, or if it’s your site – make it up.

Write down the main characteristics that you wish to attach to your brand. These should cover the whole experience space, such as:

• Relationship to the consumer (e.g. guide / assistant / professional advisor / companion)
• Overall quality (e.g. value / class / high-fashion / workmanship / trashy)
• Relative positioning to other brands (e.g. up-and-coming / challenger / established / old-school / hyper-modern / reliable / edgy)
• Personality (fun / quiet / safe / logical / aloof)

Your site persona can embody most of these characteristics, while always retaining a customer-focused attitude (because serving your customers is essential for you to achieve what you want).

The “best friend” factor

However your brand is described on paper, make sure there’s a healthy dose of “best friend” factored into the mix.

Of course, a web site is never going to be your best friend, and you may never love it, but if a site takes on the characteristics of caring helpfulness, if it’s fun, friendly, helpful and looks after you, you will have a nicer time using it.

The “best friend” factor focuses a brand on You, the site visitor. It’s not about us or our supposed brand values. When my site embodies the best friend factor, the brand becomes about You: How can we help You achieve what You want, have a better day, be happy and fulfilled?

Traits of the best friend:

• Faithful
• There for you, has your best interests at heart
• Speaks your language
• Fun
• Knows implicitly that you care for them too (i.e. not afraid to present their own motives & goals)

What kind of personality is helpful and embodies the characteristics of your brand? Picture them in the real world, interacting with real consumers. What do they look like? How do they stand, talk, listen? How much do they say? How forceful are they? What gives them satisfaction?

In some projects, I’ve had design teams print off touchstone sheets for the site persona as well as visitor personas, including a photo, name, and key characteristics or phrases they might say.

One of the major benefits of a site persona is: they’re pro-actively helpful. You’ll find it’s much easier to come up with genuinely helpful ideas when you’re playing the role of a service professional responding to a customer than a dumb system reacting logically to user inputs.

The dialogue process

As we’ve described, good information architecture facilitates effective two-way dialogue.

All dialogue reflects a personality behind it. If it is coherent and delivered in a consistent way, the personality of the site will be perceived as stronger and more reliable. Your site persona helps you achieve consistency.

Of course, this ‘dialogue’ doesn’t just use words. Sites also communicate to visitors in the language of web design (using layout, imagery, colour etc.). Visitors respond through short instructions (links & buttons) and forms.

Overview of the dialogue process

1. Start with a primary persona and one of their scenarios.
2. Play the scene featuring your primary persona and the site persona, which starts at the persona’s entry point, and finishes when the persona reaches her goal.
3. Write a scenario script that details each communication by the visitor persona and the site persona, including the visitor persona’s mental commentary.
4. Repeat for your other scenarios, and other personas.
5. Review and refine, asking:
   • How can the interaction be made more succinct?
   • Can any dialogue be anticipated and avoided (site intelligence)?
   • Is there any scope for confusion? How would the site persona help the visitor make it through smoothly?
   • What errors could possibly occur? How can the site persona best respond, in a way that increases the visitor’s trust?

The “Review and refine” step above is the pinnacle of the entire design process. This is your opportunity to make the greatest breakthroughs, gain the maximum competitive advantage, and discover those wonderful ideas that make your site that bit easier and more pleasurable to use.

Examples of optimising with the dialogue process

Maximising system intelligence is the single area that provides the greatest opportunity to differentiate excellent web products from the pedestrian mainstream.

It takes relatively little forethought, and it can be just as easy to develop as cruder, ruder functions.

“Did you find your answer?”

In FAQs, it’s great to add: “If we didn’t answer your question, please tell us using the form below. If you provide your email address, we’ll send you a response as soon as possible.”

“Perhaps you meant…”

Google suggests alternative searches for search terms that may be misspelled.

“We don’t have a page of that name. One of these articles might be the one you’re looking for…”

It’s not hard for a computer to pull up a list of similar pages when it can’t find the one you asked for. This is so much more caring than a downright rude “404 – File not found”.

“Can I order you a taxi to get to the show?”

Anticipating of the visitor’s next need, sometimes before they’ve thought of it themselves (Pierre would think about this).

“Here are some other articles/products/sites… you might like”

More anticipation, taking the work out of the visitor’s next step.

“I see you’ve used us before… Let me pull up your details.”

Another sign of a great concierge is recognising returning customers, and remembering the important details that make them feel cared for.

“I’m sorry, there has been a problem on our side. I’ll keep trying for you, and I can email you when we’ve fixed the problem.”

Basic humility and proactive problem-solving are proven to increase customer confidence in a web site.

A. Decompressing and loading the effect files

If you don’t know how to install these files in Photoshop please click HERE.

B. Running the effect

I suggest you run the README action at first.

Open an image before running the actions. The actions will work with images of any size. However keep in mind that they are optimized for LARGE photos (> 3 Megapixels).

You will produce more interesting results if you try the actions on pictures of cloudy, moody landscapes:

The actions are designed to work in both Windows and MacOS platforms.
You will need:
1. Photoshop CS or higher.
2. An application (such as Winzip or WinRAR) that decompresses zip files.

Please make sure you read the copyright and T.o.U. notice by clicking HERE.

PanosFX_RainyDay.zip (3.79 KB)