26 Jan
By Nguyễn Bình Vĩ
Web page speed and performance is very important to the user experience. If your site is too slow, you’ll not only be losing visitors, but also potential customers. Search engines like Google factor a website’s speed into account in search rankings, so when optimizing your site’s speed, you should take everything into consideration. Every millisecond counts.
Here are just a few basic and general suggestions for improving a site’s performance.
1. Defer Loading Content When Possible
Ajax allows us to build web pages that can be asynchronously updated at any time. This means that instead of reloading an entire page when a user performs an action, we can simply update parts of that page.
We can use an image gallery as an example. Image files are big and heavy; they can slow down page-loading speeds of web pages. Instead of loading all of the images when a user first visits the web page, we can just display thumbnails of the images and then when the user clicks on them, we can asynchronously request the full-size images from the server and update the page. This way, if a user only wants to see a few pictures, they don’t have to suffer waiting for all of the pictures to download. This development pattern is called lazy loading.
Ajax/web development libraries like jQuery, Prototype, and MooTools can make deferred content-loading easier to implement.
2. Use External JS and CSS Files
When the user first loads your web page, the browser will cache external resources like CSS and JavaScript files. Thus, instead of inline JavaScript and CSS files, it’s best to place them in external files.
Using inline CSS also increases the rendering time of a web page; having everything defined in your main CSS file lets the browser do less work when rendering the page, since it already knows all the style rules that it needs to apply.
As a bonus, using external JavaScript and CSS files makes site maintenance easier because you only need to maintain global files instead of code scattered in multiple web pages.
3. Use Caching Systems
If you find that your site is connecting to your database in order to create the same content, it’s time to start using a caching system. By having a caching system in place, your site will only have to create the content once instead of creating the content every time the page is visited by your users. Don’t worry, caching systems periodically refresh their caches depending on how you set it up — so even constantly-changing web pages (like a blog post with comments) can be cached.
Popular content management systems like WordPress and Drupal will have static caching features that convert dynamically generated pages to static HTML files to reduce unnecessary server processing. For WordPress, check out WP Super Cache (one of the six critical WordPress plugins that Six Revisions has installed). Drupal has a page-caching feature in the core.
There are also database caching and server-side scripts caching systems that you can install on your web server (if you have the ability to do so). For example, PHP has extensions called PHP accelerators that optimize performance through caching and various other methods; one example of a PHP accelerator is APC. Database caching improves performance and scalability of your web applications by reducing the work associated with database read/write/access processes; memcached, for example, caches frequently used database queries.
4. Avoid Resizing Images in HTML
If an image is originally 1280x900px in dimension, but you need to have it be 400x280px, you should resize and resave the image using an image editor like Photoshop instead of using HTML’s width and height attributes (i.e. <img width="400" height="280" src="myimage.jpg" />). This is because, naturally, a large image will always be bigger in file size than a smaller image.
Instead of resizing an image using HTML, resize it using an image editor like Photoshop and then save it as a new file.
5. Stop Using Images to Display Text
Not only does text in an image become inaccessible to screen-readers and completely useless for SEO, but using images to display text also increases the load times of your web pages because more images mean a heavier web page.
If you need to use a lot of custom fonts in your website, learn about CSS @font-face to display text with custom fonts more efficiently. It goes without saying that you have to determine whether serving font files would be more optimal than serving images.
6. Optimize Image Sizes by Using the Correct File Format
By picking the right image format, you can optimize file sizes without losing image quality. For example, unless you need the image transparency (alpha layers) that the PNG format has to offer, the JPG format often displays photographic images at smaller file sizes.
To learn more about how to decide between JPG, PNG, and GIF, read the following guides:
Additionally, there are many tools you can use to further reduce the file weights of your images. Check out this list of tools for optimizing your images.
7. Optimize the Way You Write Code
Look around your source code. Do you really need all the tags you’re using or can you use CSS to help out on the display? For example, instead of using <h1><em>Your heading</em></h1>, you can easily use CSS to make your headings italics using the font-style property. Writing code efficiently not only reduces file sizes of your HTML and CSS documents, but also makes it easier to maintain.
8. Load JavaScript at the End of Your Document
It’s best if you have your scripts loading at the end of the page rather than at the beginning. It allows for the browser to render everything before getting started with the JavaScript. This makes your web pages feel more responsive because the way JavaScript works is that it blocks anything below it from rendering until it has finished downloading. If possible, reference JavaScript right before the closing <body> tag of your HTML documents. To learn more, read about deferring the loading of JavaScript.
9. Use a Content Delivery Network (CDN)
Your site’s speed is greatly affected by where the user’s location is, relative to your web server. The farther away they are, the more distance the data being transmitted has to travel. Having your content cached across multiple, strategically placed geographical locations helps take care of this problem. A CDN will often make your operating cost a little higher, but you definitely gain a speed bonus. Check out MaxCDN or Amazon Simple Storage Service (Amazon S3).
10. Optimize Web Caching
Along with using caching systems, you should create websites that utilize web caching as much as possible. Web caching is when files are cached by the web browser for later use. Things that browsers can cache include CSS files, JavaScript files, and images.
Aside from the basics, such as putting CSS and JavaScript code that are used in multiple pages in external files, there are many ways to make sure that you are caching your files in the most efficient way possible.
For example, you can set HTTP response headers such as Expires and Last-Modified to reduce the need of re-downloading certain files when the user comes back to your site. To learn more, read about caching in HTTP and leveraging browser caching.
To set up HTTP Expires headers in Apache, read this tutorial on adding future expires headers.
Source: Six Revisions
14 Jan
By Nguyễn Bình Vĩ
Tết Nguyên Đán, more commonly known by its shortened name Tết, is the most important and popular holiday and festival in Vietnam. It is the Vietnamese New Year marking the arrival of spring based on the Lunar calendar, a lunisolar calendar. The name Tết Nguyên Đán is Sino-Vietnamese for Feast of the First Morning
Tết is celebrated on the same day as Chinese New Year though exceptions arise due to the one-hour time difference between Hanoi and Beijing. It takes place from the first day of the first month of the Lunar calendar (around late January or early February) until at least the third day. Many Vietnamese prepare for Tết by cooking special holiday foods and cleaning the house. There are a lot of customs practiced during Tết, such as visiting a person’s house on the first day of the new year (xông nhà), ancestral worshipping, wishing New Year’s greetings, giving lucky money to children and elderly people, and opening a shop.
Tết is also an occasion for pilgrims and family reunions. During Tết, Vietnamese visit their relatives and temples, forgetting about the troubles of the past year and hoping for a better upcoming year. They consider Tết to be the first day of spring and the festival is often called Hội xuân (spring festival).
Customs
Vietnamese people usually return to their families during Tết. Some return to worship at the family altar or visit the graves of their ancestors in their homeland. Although Tết is a national holiday among all Vietnamese, each region and religion has its own customs.
Tết in the three Vietnamese regions can be divided into three periods, known as Tất Niên (Before New Year’s Eve), Giao Thừa (New Year’s Eve), and Tân Niên (the New Year), representing the preparation before Tết, the eve of Tết, and the days of and following Tết, respectively. All of these customs are to celebrate Tết in Vietnam.
Before New Year’s Eve
This period begins one or two weeks before the actual celebration. The general atmosphere leading up to Tết is in the bustle of shopping, decorating the home, cooking traditional Tết food and waiting for relatives to return home. People try to pay off their debts in advance so that they can be debt-free on Tết. Parents buy new clothes for their children so that the children can wear them when Tết arrives. Because a lot of commercial activity will cease during the celebrations, people try to stock up on supplies as much as possible.
In the days leading up to Tết, the streets and markets are full of people. As the shops will be closed during Tết, everyone is busy buying food, clothes, and decorations for their house.
Vietnamese families usually have a family altar, to pay respect to their ancestors. Vietnamese families have a tray of five different fruits on their altar called “Ngũ Quả”(five fruits type). During Tết the altar is thoroughly cleaned and new offerings are placed there. Traditionally, the three kitchen guardians for each house (Ông Táo) (Kitchen God), who report to the Jade Emperor about the events in that house over the past year, return to heaven on the 23rd day of the twelfth month by lunar calendar. Their departure is marked by a modest ceremony where the family offers sacrifices for them to use on their journey.
In the days leading up to Tết, each family cooks special holiday foods such as bánh chưng and bánh dầy. Preparations for these foods are quite extensive. Family members often take turns to keep watch on the fire overnight, telling each other stories about Tết of past years.
The New Year
The first day of Tết is reserved for the nuclear family. Children receive a red envelope containing money from their elders. This tradition is called mừng tuổi (happy new age) in the north and lì xì in the south. Usually, children wear their new clothes and give their elders the traditional Tết greetings before receiving the money. Since the Vietnamese believe that the first visitor a family receives in the year determines their fortune for the entire year, people never enter any house on the first day without being invited first. The act of being the first person to enter a house on Tết is called xông đất, xông nhà or đạp đất, which is one of the most important rituals during Tết. According to Vietnamese tradition, if good things come to the family on the first day of the lunar New Year, the entire following year will also be full of blessings. Usually, a person of good temper, morality and success will be the lucky sign for the host family and be invited first into the house. However, just to be safe, the owner of the house will leave the house a few minutes before midnight and come back just as the clock strikes midnight to prevent anyone else entering the house first who might potentially bring any unfortunate events in the new year to the household.
Sweeping during Tết is taboo or xui (unlucky), since it symbolizes sweeping the luck away. It is also taboo for anyone who experienced a recent loss of a family member to visit anyone else during Tết.
During subsequent days, people visit relatives and friends. Traditionally but not strictly, the second day of Tết is usually reserved for friends, while the third day is for teachers, who command respect in Vietnam. Local Buddhist temples are popular spots as people like to give donations and to get their fortunes told during Tết. Children are free to spend their new money on toys or on gambling games such as bầu cua cá cọp, which can be found in the streets. Prosperous families can pay for dragon dancers to perform at their house. There are also public performances for everyone to watch.
Decorations
Traditionally, each family displays “Cây nêu”, an artificial New Year Tree consisting of a bamboo pole 5 to 6 m long. The top end is usually decorated with many objects, depending on the locality, including good luck charms, origami fish, cactus branches, etc.
At Tết every house is usually decorated by hoa mai – Ochna integerrima (in the central and southern parts of Vietnam) or hoa đào – peach flower (in the northern part of Vietnam) or hoa ban (in mountain areas). In the north, some people (especially the elite in the past) also decorate their house with a Prunus mume tree (also called mai in Vietnamese, but referring to a totally different species from Ochna integerrima). In the north or central, the kumquat tree is a popular decoration for the living room during Tết. Its many fruits symbolize the fertility and fruitfulness that the family hopes for in the coming year.
Vietnamese people also decorate their homes with bonsai and flower plants such as chrysanthemum (hoa cúc), marigold (vạn thọ) symbolizing longevity, mào gà in Southern Vietnam and paperwhite flower (thủy tiên), lavender (viôlét), hoa bướm in Northern Vietnam. In the past, there was a tradition that old people tried to make their paperwhite flowers blossom right the watch-night time. They also hung up Dong Ho Paintings and thư pháp (calligraphy pictures).
Greetings
The traditional greetings are “Chúc mừng năm mới” and “Cung chúc tân xuân” (Happy New Year). People also wish each other prosperity and luck. Common wishes for Tết include:
• Sống lâu trăm tuổi (Live up to 100 years): used by children for elders. Traditionally, everyone is one year older on Tết, so children would wish their grandparents health and longevity in exchange for mừng tuổi or lì xì
• An khang thịnh vượng (Security, good health, and prosperity)
• Vạn sự như ý (May a myriad things go according to your will)
• Sức khoẻ dồi dào (Plenty of health)
• Cung hỉ phát tài (Congratulations and be prosperous)
• Tiền vô như nước (May money flow in like water): used informally
Food
In Vietnamese language, to celebrate Tết is to ăn Tết, literally meaning “Tết eating”, showing the importance of food in its celebration. Some of the food is also eaten year-round, while other dishes are only eaten during Tết. Also, some of the food is vegetarian since it is believed to be good luck to eat vegetarian on Tết. Some traditional food on Tết are:
• “Bánh chưng” and “Bánh dầy”: essentially tightly packed sticky rice with meat or bean fillings wrapped in Dong (Phrynium placentarium) leaves. When this leaves is unavailable, banana leaves can be used as a subtitute. Bánh chưng (rectangular) and bánh dầy (circular) are symbolically connected with Tết and are essential in any Tết celebration. Preparation is time-consuming, and can take days to cook. The story of their origins and their connection with Tết is often recounted to children while cooking them overnight.
• “Hạt Dưa”: roasted watermelon seeds, also eaten during Tết.
• “Dưa Hành”: pickled onion and pickled cabbage.
• “Củ Kiệu”: pickled small leeks.
• “Mứt”: These dried candied fruits are rarely eaten at any time besides Tết.
• “Cầu Dừa Đủ Xoài” – In southern Vietnam, popular fruits used for offerings at the family altar in fruit arranging art are the custard-apple/sugar-apple/soursop (mãng cầu), coconut (dừa), papaya (đu đủ), and mango (xoài), since they sound like “cầu vừa đủ xài” ([We] pray for enough [money] to spend) in the southern dialect of Vietnamese.
• “Thịt Kho Nước Dừa” Meaning “Meat Stewed in Coconut Juice”, it is a traditional dish of fatty pork stomach and medium boiled eggs stewed in a broth-like sauce made overnight of young coconut juice and nuoc mam. It is often eaten with pickled bean sprouts and chives, and white rice.
Games
People are delighted to enjoy exciting games during Tết: bầu cua, cờ tướng, ném còn, chọi trâu, đá gà, marshmallow toss, etc…They also participate in some competitions presenting their knowledge, strength and aestheticism such as: bird competition and ngâm thơ competition.
People can also visit fortune tellers, in temples and in the streets, to have their fortunes told. You must know your zodiac sign and the star you were born under to have your fortune read. Whether the fortunes are taken seriously depends entirely on the person receiving the fortune and the reputation of the fortune teller.
Customs and taboos
These customs come from traditions passed from generation to generation and have become standard. Because of the idea that the beginning will affect the middle and the end of the year, Vietnamese people avoid doing bad things and try to do good things during Tết holiday.
05 Jan
By Nguyễn Bình Vĩ
As web design and design in general have evolved, rules have been established to ensure consistent and usable designs.
Some of these rules were created simply because website creators abused certain principles without regard for their users.
But these rules are not enforced by anyone and should be broken when necessary, especially when breaking them would lead to a stunning design.
In this article, we present 10 rules that you can break if it suits your design needs.
Rule #1: Do Not Display the Horizontal Scroll Bar
A significant number of mice don’t have a horizontal mouse wheel. This makes it awkward to scroll left or right when a web page’s content extends past the sides of the browser.
It can be annoying to have to bring the mouse cursor down to the bottom of the window and drag the scroll bar over just to see a word or two that lies beyond the viewable area of the page. That said, here are some well-designed sites that put the scroll bar to work in effective ways.
Benek
Benek uses JavaScript to change the scroll direction of the mouse wheel from vertical to horizontal. Each item in Benek’s portfolio is separated into its own column. The site has a surprisingly fresh feel and flows smoothly.
Shoe Guru
Shoe Guru gets away with horizontal scrolling because it takes advantage of the way people look at shoes. People look at most products from top to bottom, but shoes are different. People’s eyes usually move across the length of the shoe. Using this habit to its advantage, Shoe Guru makes its website’s design flow in the same direction, making the motion feel natural.
Stephane Tartelin
Stephane Tartelin uses the horizontal scroll bar to make his artwork look like it’s in an art gallery. Although the vertical mouse wheel doesn’t function like it does in the examples above, the effect works surprisingly well. You could even argue that the effect would be diminished if the mouse wheel were re-coded to scroll horizontally.
Graphic Therapy
While Graphic Therapy doesn’t display a horizontal scroll bar on its page, it still allows horizontal scrolling by clicking and dragging around the screen. Graphic Theory used horizontal navigation because all of its images are the same height but not the same width. The horizontal navigation helps the site flow smoothly.
The Horizontal Way
The Horizontal Way is a showcase of websites that use horizontal scrolling. The grungy graphics are beautiful, and this site is unique as far as CSS galleries go.
Rule #2: Use a Minimal Number of Font Faces
Too many fonts usually conflict with each other and overwhelm the viewer. Each font has a personality, and too many personalities can create disorder.
To effectively use more than just a couple of fonts, a design has to be very text-oriented, and the rest of the design needs to be relatively quiet. Here are some examples of sites that use this sense of conflict and disorder to engage the user.
Links LA
Links LA uses many fonts in a non-linear layout to create a sense of energy. The page is difficult to read quickly but draws the user in. It’s also worth noting that none of the fonts are overly decorative; each word is legible, keeping the design crisp and clean.
Geo Elements Design Studio
Using a variety of fonts usually conveys a sense of energy and chaos, but Geo Elements Design Studio‘s website is very open and clean. Each font is given its own space so that the viewer doesn’t associate it with another font. The image of the sky in the background helps reinforce the sense of openness.
Richard Stelmach
Unlike the last example, Richard Stelmach pushes his different fonts close together. The design works because only one font doesn’t look hand-drawn, and the other two work well with the illustration. Hand-drawn fonts usually work well together, even when there are many different font faces.
Satsu
Satsu seems to have a lot of different fonts but actually only has three (not including the Sports Council portfolio item). By spacing everything carefully, Satsu associates certain lines of text with each other, even though the text may be in different fonts.
The logo title is in one font, and the two sub-titles each have their own font, but the viewer naturally groups these three text items together. Satsu is able to create energy without overwhelming the page with personalities.
Rule #3: Do Not Use Too Many Colors
The fear of going too far with a design is what separates professionals from rookies and rookies from the oblivious. The oblivious try to make their designs as extreme as possible, with words on fire, blinking text, and as many colors as possible.
Rookies want to keep their designs subtle and easy on the eye, but in the end their designs can sometimes look lifeless. The following eye-pleasing designs are by some true professionals who are pushing boundaries.
Matt Mullenweg
Matt Mullenweg’s beautifully colored design looks like a watercolor painting (site has been updated since this article was written). All of the colors in the background would grab anyone’s attention.
Generally, good designs with a ton of colors will have these colors in the background, with a simpler palette up front. Reading text is very difficult when too many things are going on.
Travic Isaacs
Travis Isaacs’s design has a colorful vertical gradient in the background that makes the design seem colorful throughout. This website has bright pink as its link color, which is a great choice for designers who want to create a colorful effect.
James De Angelis
James De Angelis’ website shows that text can be colorful without coming across as rookie-like. The design is very spare, and the tagline is certainly given center stage.
Rule #4: Make Your Site’s Goal Obvious
Something that really gets crammed in the ears of young designers is that a design should instantly tell viewers what they are looking at before they read any text.
Brand recognition is important for large corporations, but sometimes the smaller guys need to be a bit more clever to get the viewer’s attention. Holding back information can intrigue the viewer and “tease” people into wanting to learn more.
Applying this technique to web design can greatly increase the time that users stay on your site.
Cetrotrees
On most portfolios today, the freelancer or company usually introduces themselves and explains their work. Cerotreees instead puts some vaguely labeled links on the left and samples of its work on the right, but nothing explains the idea or person behind it.
The air of mystery surrounding the site entices the user to stay.
The Last Mixtape
The Last Mixtape is another portfolio that shows its work and nothing more. Such designs exude a feeling of extreme confidence. They never try to sell themselves; they just expect the user to be blown away and come begging for a contract.
Peter Pearson
Using a splash screen is a good way to slow the user’s thought process and inspire them to dig deeper. The splash page’s goal is usually to explain the site quickly with photos or a short bit of text.
But in Peter Pearson’s case, its goal is to evoke a feeling. The big sky and splattered text effect do a great job at evoking curiosity because these things don’t usually appear together. This site also does a great job at continuing the emotion created by the splash page into the actual content.
The side-scrolling motion and animated lines that follow the user are really effective.
Piepmatzel
A great way to get around the language barrier is to not use any words. Piepmatzel is a CSS gallery, and people who have seen a CSS gallery before will likely recognize it as one right away.
Those who haven’t may be intrigued enough to give a few of the thumbnails a click in the hope of figuring out the pattern. The small amount of text at the bottom of the page helps with sorting and is superfluous.
Rule #5: Navigation Should Be Easy To Figure Out
Navigation should not be the bottleneck of a site. Users should be able to find what they want quickly. Sometimes, though, unintuitive yet engaging navigation can help the user feel connected to the site and what it is promoting.
Alvin Tang
As mentioned in the previous section, an air of confidence is conveyed when a portfolio doesn’t spell itself out. This is the case in Alvin Tang’s photography portfolio. When first arriving on the site, the user does not immediately recognize the words they see as links.
This uncertainty should prompt them to poke around a bit. Moving the mouse over a word reveals that it is indeed a link, and upon clicking it, a gorgeous photo loads. The photo will entice users to continue browsing.
To see more photos, users have to click the “Back” button on their browser (something most people understand to do) and then click another link. There is no hand-holding in the design, and it works extremely well. This isn’t a conventionally “gorgeous design,” but it delivers exactly what it needs to.
Kasulo
Kasulo‘s navigation isn’t terribly hard to figure out, but the average user may not know exactly what to do upon arriving on the site. After the first click, though, everything becomes obvious.
The user navigates the portfolio pieces in 3-D style, and the latest items appear closest to the beginning. Using the mouse wheel is even more fun.
Marcio Kogan
Marcio Kogan’s site is another example of great navigation that isn’t immediately obvious. The instruction “Drag me” is hard to resist, and once the user does that, they’re on their way to cruising the portfolio items. The mouse-over previews are a small detail but really impressive.
Ceranco
If a client were to ask a designer to make their site in 3-D, like a first-person shooter video game, most designers would silently laugh to themselves, take a deep breath, and then slowly explain why that would be a bad idea.
While the website for Ceranco isn’t exactly a 3-D shooter, it could easily be confused for some sort of indie computer game. Sites like this are great at engaging users. While the long loading time and poor search engine optimization make this less than ideal for most projects, it’s definitely worth a second thought.
Rule #6: Use Different Colors for the Text and Background
This rule perhaps isn’t written all over the place, but many rookies are so afraid of making text unreadable that they don’t consider using the same base color for both the background and font itself. You can follow some simple techniques to make the similar colors work.
Linksys
The Linksys site is neat because of how it has one blue for all of its links, even though the background color is various shades of blue. While a risk and maybe not the greatest color decision, it does work.
Brad Colbow
Brad Colbow’s design is similar to Linksys’ because of the blue text on blue background. Blue on blue is difficult to pull off nicely, especially with so many different blues throughout the site.
Powerset
So far in this section we’ve seen only blue websites, because blue text is hardest for the human eye to read, and so legible blue type is always impressive. If a text effect works in blue, it will most likely work in any color.
Powerset uses a letterpress style for its font to create a 3-D effect that effectively separates the text from the background.
Artist In Design
Artist In Design not only has green text on a green background and yellow/beige text on a yellow background but has text directly on top of a photo.
While some individual letters may be hard to read, the words as a whole remain legible. This type of effect should almost always be center stage in a design.
Horacio Bella
Horacio Bella uses another 3-D effect on his portfolio. In this case, the letters appear to pop out rather than be dented inwards. Without this effect, legibility would have been greatly reduced. Another good effect used here is the tight kerning of letters, which further improves legibility.
Rule #7: Don’t Put Animation in the Way of Your Content
Seriously, don’t pop up little Flash ads right where the user is reading. Same goes for those survey boxes that show up whenever the user is in the middle of a sentence. Users do not enjoy being distracted when they’re halfway through a sentence. Unless…
It’s really hard to not be enthralled by the little spider on ABA‘s site. The design is clean, and although the spider is a distraction, it’s okay. So far, this site I think is the only exception to the rule.
Rule #8: Stick to Web-Safe Fonts
Although font face replacement techniques are still young, they’re already making a big splash. sIFR was the first, and recently Cufón and Typefasce.js have emerged.
Diseñorama
On the Diseñorama website, the red “Recientemente” text is selectable. One downside is that if the site doesn’t load instantly, the user will see the original plain font briefly.
Another downside is that if the user has either JavaScript or Flash disabled, they would only see the original font. All things considered, it’s still pretty cool. Hopefully it’s a preview of what’s to come in the next few years.
Cactuslab
Cactuslab also uses sIFR for the blue sub-headers (such as “Winter Work”). Although sIFR is the most complicated of the font-replacement techniques, text can be copied and pasted, giving it a big advantage over the two other techniques.
Rule #9: Don’t Have a Splash/Landing Page
Many designers have had that same old discussion with their clients about why a splash page is not a good idea. Google tends to rank such pages lower, and they slow down the user from getting the content that they’re after. But they can be incredibly beautiful and inspiring if done right.
Gloss Postproduction
The purpose of the portfolio sample that appears on the splash page of Gloss Postproduction‘s website is to elicit an emotional reaction from the user.
Upon each visit, a random photo from the portfolio is loaded. Clicking on the photo scales it down and puts it in its place among the other portfolio pieces on the site. The scaling and motion effect provides continuation and helps carry over the user’s emotion to the rest of the company’s work.
Issa London
When a site is completely done in Flash, the loading bar can serve as a splash page. When a user sees a loading bar, they will either close the page and go somewhere else or switch to another tab and browse elsewhere while they wait.
Once the page loads, it’s best to wait for the user to return before starting up. In Issa London‘s case, the gate is a perfect metaphor to say that the site is ready and the user may enter.
When the user clicks on the gate, the gate opens and various illustrated models appear. Using the gate on the splash page is a great design idea because upon entering, the user feels engaged.
Rule #10: Don’t use Tables
Any web designer who uses tables in their designs will instantly be called a rookie by experienced designers. Tables don’t display the same in all browsers, and they can make the source code look messy, but at the very least you’ll know what you’re getting with them. Here are some examples of designs that incorporate tables.
This table is slightly hard to see but is tucked in there between the two chairs. It’s a nice little side table but sadly doesn’t contribute much to this site’s design.
Tables are way in the background of this design on Work at Play, but they keep the workers’ laptops and other items within easy reach. Without these tables, the room would feel much emptier, and the background photo wouldn’t have the same effect.
Although this design mostly features chairs, a nice little table appears in the top-right of the thumbnail. Looks like a pot is sitting on it.
As far as designs with tables go, this is one of the best. With two tables featured in this Flash animation, the design gives them a lot of attention. This site should be on every designer’s list of great designs that use tables.
Break the Rules!
Breaking the rules is okay when a design calls for it. Many of the design choices reviewed here would not be considered by the average designer. This is what separates great designers from average ones.
Those brave enough to go against what they’ve been taught always stand out.
Written exclusively for WDD bt Eli Penner. He runs his own website at SleepyHero.com
Do you break any rules in your web designs? Why or why not? Please share your views with us…
Source: WebdesignerDepot
English
Dutch 
Vietnamese 
RSS feed
Facebook
Twitter
RSS