Principles of beautiful web design

Principles of beautiful web design
The book The Principles of Beautiful Web Design by Jason Beaird is a guide that refers to the application of design elements as well as the different thinking methods to develop strong concepts for the web.

Layout and composition
As your starting point designers need to understand the nature of the biz they are working for. By gathering all information and going through an analytical process, we can finally establish the foundations of our design. This chapter explains how balance, symmetry, grids, proportion, unity, repetition, and proximity need to be well thought on this early phase of your process. For more info visit http://www.coolhomepages.com/

Color
This chapter covers the significance of colors and people’s immediate reaction to them. It emphasized their relation with feelings, states of mind and nature. Here also explains the relation between complementary, cool, and warm colors and how they can best serve for a specific design purpose. For more info visit http://kuler.adobe.com/#themes/rating?time=30


Texture
It refers to an optional approach that has not often been taken into consideration offering a variety of solutions that may round your design. Texture gives you the ability to bring a feel to your layout even when is intangible in wed design it a can evoke memories or experiences. For more info visit http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/

Typography
Typography like in any other media is a key element in design. It is not only what we communicate, but also how we communicate and when we communicate. Although typography for web is limited for content it needs to be specified between serif and san serif; in addition Designers use other techniques to secure certain types faces that they want them to be display all browsers. For more info visit http://ilovetypography.com


Imagery
It covers the different formats when saving images for the web as well as the quality and legibility. It also covers the most effective way to handle imagery on a page base on its content and hierarchy. For more info visit www.shutterstock.com

10 Points to Remember When Building a Website

1. Creating an organized directory and standardizing your markup will help you troubleshoot any problems more efficiently. This will also help others understand the nature of your coding process.
2. Make sure you title your page. It is important so browsers can track and categorize your side for a more effective search.
3. Use special characters’ attributes when marking up a page. Some characters or symbols will not be rendered in certain browsers otherwise.
4. Default margins. All elements include default margins; for instance it is critical to define those measurements on each declaration, even cero needs be specified.
5. Make sure you establish the width on every floated elements.
6. Make sure embedded styles sheets are under the head space on your HTML file.
7. Text elements are inherited. Once you established a font size just like any other text element you have to use that number as your reference for all others in your document.
8. Image replacement technique is your best choice when using obscure typefaces or branding for display purposes.
9. To add background color running to the screen bottom of your page you need to add some padding-bottom at the end of your document usually in px. tocreate a distance from your last text line.
10. Validate HTML and CSS separately. You can validate your HTML and CSS together when checking your HTML markup; however, that doesn’t mean that your CSS is correct you need to do it separately for an accurate validation.

Photographic Web Nightmare

I know this sample may look extreme for most of you; however, I just wanted to show you not only a sample of a bad photographic website, but instead the worst representation in this category ever created. Since anyone who learns the ins and outs of html or CSS feels pretty much entitled to publish anything in the browser, It is not hard to find poor samples of web site designs. However, the chances to find a site that violates all the basic rules of design, orchestrating the most unspeakable visual solution ever seen in the history of Internet can only be found in http://yvettesbridalformal.com/ . As you can see, there is a lot to work to do. The first thing I will change on this site is the background-image; a pattern that has nothing to do with this theme or any other. What were they thinking? Next immediate step is to reduce the typographic elements to one or two typefaces, styles, sizes, weights, colors, etc, etc. Take out all the background for text, and God! Create a navigation bar, which has not been established. I don’t know if the designer was under the influence while working on this but the repetitive, colorful, non-sense, text has to go, and the new content needs to be arranged in paragraphs and edited closely. The excessive use of underlined links are a pain to watch along with the photography all over the place show. The imagery could have been organized in slide shows or in separate windows for demonstrations purposes. Taking away some of the silly comments and greetings would not hurt as well. The only reason I took the time to write about it is to show some samples of some disturbing design that can be found out there.

With …

MINIMALISM design

As I was learning how to identify the different design solutions used for web, I found the Minimalist style, term that I have heard before in another art context. Minimalism is a form of art that reduces design elements to the basics, leaving only the most fundamental features. This art style became very popular in the 60’s and late 70’s mostly in the category of sculpture and painting. Although minimalism was primarily popular in the United States, it was also followed by European artists, who later continued the trend of the American school. Today, minimalism has been applied towards web design, an art form that depends entirely on the size of its audience; which makes the execution of this approach, a real challenge. For instance, there is a short list of successful samples. However, I noticed that most of them were created in Europe. Consequently, I found http://www.weyhoven.de/ a graphic artist website from Germany, which I believe, becomes a good sample of an effective design solution in a minimalism style.

On this site colors are limited to black and green for text. The content information is minimum and simplified by the use of san-serif typography. The geometric structure of the layout is emphasized by the arrangement of four text blocks framed by windows that display after clicking on the WER/WAS/WEISO/WO WHO/WHAT/WHY/WHERE navigation bar; which I bothered to translate to ease up the adventure. The artist extends its design in the WHAT window to show his portfolio in an interactive slide show. A simple layout that uses math elements (-, +, x.) or computer symbols, if you will, generating a language that he keeps consistently throughout the site. The Minimalism design of this site was not arbitrarily apply instead this representation contributes to the overall style that is also the trade mark of his own art.
With all …
Oskar

Amateur Designers

I found an article by Jennifer Kyrnin about the Basics of Web design at about.com. It summarizes a list of proper applications of design elements when building a web site. It is a friendly reminder for those who started feeling too confident about their HTML and CSS skills. Although it's plain language, it helps you to keep the balance between impressive and effective design.

Jennifer breaks down the elements into graphics, layout, fonts, advertising, and remembering your readers. She emphasizes the “think small” mentality of the web. Graphics should be small and relevant to its content without becoming a distraction for its audience. Kyrnin recommends standard layouts, showing her preference for the three-column format. White space is also important, comparing this to the success of newspapers; which explain Kyrnin knowledge and relationship with the printing industry. When it comes to typefaces, as most of us know, standard font families are the way to go. However, she also mentions the use of Serif for headlines and san serif for text, explaining that the low resolution of the screen blurs the kerning which could make serif fonts hard to read, contrary to prints where serif are preferred for text.

In terns of advertising, they should not dominate your design. Designers have to treat advertising as any other element and these need to be relevant to their content. It is important to remember that if your site is about video games, users are more likely to click on ads that reflect their needs.

Last, designers have to test their pages in different browsers and operating systems unless there are planning to be viewed by a group that shares the same capabilities.

All these considerations alleviate the process of designing a web site, and allow the artist to focus on the purpose of its nature, a versatile interactive media.

With all due respect.

Single Page Website Design

THE BEST

As I was going through the 30 Outstanding Single pages @ http://www.webdesigndev.com/inspiration/30-outstanding-single-page-website-designs, I found some interesting layouts that need special mention before going over my favorite site. One of them was the Fish Marketing which I came to appreciate for its concept and slide show presentation. Another one that I found interesting was Think Green, where every element of its design was well-thought, from the color palette to the text block divisions cleverly animated. However, when it comes to the best out of these 30 websites, I chose the Deluge Studios, a site that stands out for its simplicity, easy navigation and accessibility. Deluge is a design company that provides web, interactive as well as print services. In its one page layout, the designers present a slide portfolio below the navigation bar in Our Work area. On the Right a standalone gray column describes the company’s background and their work process. The color choices are green and different gradients of stone gray. The subtlety of its earthy colors suggests the wash away concept of the company’s name; which directs the viewer’s eyes to the good art work and relevant information. Everything seems to be a click away. I tried my two favorite sites in different platforms with standard screen size, Deluge appears to display better in both systems. It does not have long scroll downs to hassle with, and there is always a back to top button that brings you home. On the very top there is also an etc sub menu that opens down a list of links to very interesting sites and news, and at the bottom of the page you will also find a cool flash version of the site. All these components make its accessibility a plus and DelugeStudio a successful design.

http://www.delugestudios.com

THE WORST

From all the sites I struggled with Stoodeo was the most painful. I won’t take away the artist skills for illustration which is ok, but where is everything else? It must be a very Avant-garde style for an obscure secular clientele. There is not Company information, no samples of her work (with the exception of the work in progress site), no artist biography, or e-mail. If the site is still being built it needs an apology statement somewhere at least. The design is completely centered and heavily weighted on the top. Discretion and secrecy seem to be guaranteed with her service, it sounds more as the nature of other type of business, although the only site she is currently working on is a religious theme. Don’t get me wrong, based on the colors used, and illustrations she seems to be e very sweet girl but her slogan and statement are conflicting. All this can be easily improve by adding some sidebars and a navigation system, the good thing is that at least she has a style.

Another on the list: Jiri Tvrdek and the scrolling up and down tree.

With all due respect.

Oskar

Web comments

www.nrp.org is a site that reflects the idiosyncrasy of its business. The National Pubic Radio home page, a digital version of a front-page newspaper layout, gives the audience an overlook of the news and other interest this public service provides. This information is shown in different categories easily found in its navigation bar: Home, News, Arts & life, Music, Programs, Listen, Hourly News, and Podcasts. All of them located on the top for easy access. This site also keeps consistency throughout its pages by using a grid system that is established mainly of three columns divided by the hierarchy of the headlines and the quality photography. This application breaks down the page in different blocks enhanced with multimedia elements such as slide shows and clean illustration designs. At the bottom of the page there is a summary of the other pages with quotes and attractive links that persuade the viewer to continue exploring the unlimited source of information and cool audio archives. The color application is mostly black and white, which is reminiscent of a newspaper, perhaps to with identify with it’s demographic. There is not a clear use of contrast on the layout except for the music page. Colors are more predominant and images overpower the whole design, however this is done with subtlety.