20 Beautiful Contact forms for Inspiration

It just so happened that the design contact forms, usually highly do not break my head. Well there is some text fields - the "theme", "from whom» (e-mail), but a form of communication, what do you need? Like anything, but now is not the beginning of the 90s. For a long time no details! Every element, every detail has been actively playing on the image of the site (hence the company), attracts the attention of the reader (consumer or buyer), so now the situation is slowly changing.

Pioneers have always been design agencies, which are traditionally the first to offer something conceptual, innovative. They were beginning to catch up with the rest, there is a trend. Thus, it is now not uncommon sites where contact form is becoming a real "history" or "adventure", and that is the most interesting (or comfortable) place on the site.

I have prepared for you a few examples with a nice contact forms for inspiration for the original selection thanks to the authors of this article :

Frankly, even I (not a web designer) have the desire to embellish or create an equally original page with the contact form. Especially liked the options, where except for the contact form is a summary of the site (the author), as well as links to social services.

Hopefully, this beautiful collection of contact forms stimulated your imagination and you were some interesting ideas about their own contact form. In RuNet there is little creative examples like (maybe I'm wrong and you correct me?), You have all chances to become one of the first!

Read More →

9 Tips on Typography Site

Typography for the Web site - quite an important design element, which is expressed in runet somehow not very much. This question is often raised in the English-speaking foreign design blogs, we have virtually no attention is paid to him. No, of course when you create the layout, most designers think of the site typography - fonts, design, but it is very modest and small. Because, probably, in runet can count on one hand the number of projects with a bright and creative custom typography, more than the standard dull "gray" design: (Maybe that's why Dmitry Naumov decided to share an interesting guest post about typography. Dima in combination, by the way, is author of a very useful project Converlab - "Design. Usability. Conversion." So, 9 boards typography Web site:

A. The choice of font

The choice of font depends a great deal. Type design determines the mood passes 'character', and indeed has a strong influence on perception. Choose the font that matches the style and concept of your site. For example, a "traditional" design goes a traditional serif font like Times Roman, for the "modern" design can go sans serif font - Arial or Helvetica;

Two. Font Size

Particularly important is the font size of the main body of the text. Title (subtitles) can be grotesquely large and clunky, but the main text should be comfortable, which is possible only if the optimal size. This is usually 12-16 px;

Three. The set of styles

The font should not be monotonous, gray mass is not nice to read. Develop a system of styles for headings and subheadings (H1, H2, H3, etc.), quotes the main text and the like. Use a different font sizes, options for the mark, perhaps to contrast these to use another font (especially for headlines or quotes);

4. Emphasis

Important places in the text must be allocated - bold or italic. The main thing is not to overdo it. Focus on that and he later emphasized that the dosage should be used;

Five. Column Width

In traditional typography great attention is paid to the width of the column, for this reason that the text is divided into columns in newspapers and magazines. If the string is too long to read it is not convenient. Because you have to look too far to translate from the end of one line to the next. Short Line is also not good. The optimal length of the string is in the range 70-140 marks;

6. Leading (Leading)

Leading (Leading) - the distance between rows. If it is small, it affects the readability. Too big, too, Leading promises nothing good. In general cases, you will probably be the best spacing for 2-4 points more than the size of the font;

7. The general structure of the page

Ideally the page should be used a single grid. Thus it is possible to achieve a harmonious form of the whole site.Try to use common rules and styles (which you have come up with) on the whole site;

Eight. Color and contrast

The text should be readable, so he must be a contrast. It is better to use the classic black and white decision, it has the best possible combination of contrast, so the most convenient for reading. The remaining combinations to be tried with caution otherwise you risk to make one of the common mistakes of web design .

9. White space

White space - it is not void, but an important design element. It should not be too closely to mold elements, always leave a little "air". Thus it is possible to achieve a clean, light, nice design.

-

First of all, thanks for the post of Dime. All told briefly and in substance, in fact, develop the theme can be infinite for each item. I think part of the answers can be found on its website Converlab . Also, on my own I wanted to add that if you really decided to do something, "such things" in terms of typography site, you would be advised to view the work of the various collections on the Internet with the original decisions. This is very inspiring, but also contributes to the emergence of creative ideas.

Read More →

Six Basic Steps of Site Development

I was here recently in the comments said that some positions do not correspond to the format of the blog, which is positioned just a useful resource for web designers. If you want a competent and professional approach to the process of developing store websites, it is necessary to need good ecommerce hosting for best performance of site. On the one hand, it is really a lot of attention paid to the graphical editor, for example, photoshop, but on the other - this is also part of the work, and no small. However, today decided to publish a post that would be willing to partially satisfy the read something about creating websites. In this case a web design, I decided not to limit, and consider more broadly.

If you want a competent and professional approach to the process of developing websites, it is necessary to take into account all the details and carefully consider all stages of the project . In this case, nothing can be overlooked, even though developers are often guilty of this. As for the "stages of creation," then perhaps they can each have their own, that depends on who and how used to work. Nevertheless, there is a list of common (recommended) items that it would be desirable to perform. In any case it is useful to define for itself a clear structured plan to ensure that no detail is not overlooked.

Typically, a workflow on a project is as follows:

• The study of the issue;
• Design, concept development;
• Design;
• Create a site;
• Launching the site;
• Support for the site;

As a source of inspiration was used by this article . Let's look at each step in detail.

Study

"Why learn something?" - You ask - "we are enough experienced people." In fact, this is one of the most important steps. You may be an experienced developer but nothing has been understood in a "women's shoes," which will be dedicated to the site. Therefore, before proceeding to phase development of the site you must have an understanding of the subject and the subject site which will be dedicated. Not that the need to delve into all the details of this niche, explore a variety of models of women's shoes, simply estimate the basic features and nuances of the subject area.

When you're designing a site for a client, take as much time as the initial communication with the client. Need to know about the goals and objectives, timelines, target audience, the proposed budget and other matters. Get as much information. At the end of this stage you should have a clear understanding of what is required of you. This difficult task can help you such a thing as a "brief." This is something like a list of standard questions on the future of the project, where you can learn the preferences and wishes of the customer. Of course, "Brief for the development of the site" will not replace personal contact with the client, but can be used in the initial stages of cooperation - straighten it by mail, or to make a survey over the phone. In the "brief" can include various issues - from the audience of the project, the proposed budget to personal preference in design and functionality of the site.

The overall design, layout

Once you have decided on the goals and objectives, you can begin to develop a basic layout . This phase can start by visiting competitors' sites. Surely someone has done something similar to you. Therefore, the first task - to study the best examples of sites on the same (or similar subject) and note for themselves the advantages and disadvantages of each. Given the experience of competitors, you can proceed to breynshtormu in which you need to determine the overall design concept, the basic elements, colors, fonts and so on. Do not forget at the same time, of course, and the wishes of the customer.

The last stage of the design - a sketch of the framework. It can be done on paper, by using special programs and services. If you're working with a client, be sure to confirm the layout of your base before you move on. In principle, in my practice, I saw that "the basic outline of the layout" is not always approved. An exception may be considered a design of logos, where it is important to understand just which direction to go. But as for the design of sites, not all customers can understand something from scratch is usually determined by the basic site structure, layout and color blocks. Although to some extent, it can be considered a "sketch" :)

Site Design

It's time to "build on our frame of meat." Many designers and developers are just beginning to this stage, ignoring the "study questions" and "layout". In my opinion this is not entirely wrong, rather, that the preparatory steps you will work much easier and more efficient - all the basic questions and decide for yourself the details before, but now concentrating on building design. Thus, studying the subject and having passed through the stage of creating a simplified layout, you have pre-determine the content and then do not miss anything of the kind. Design - this stage of the determination of the shape in which you clothe your content, it details the layout.

Typically, such a design is created in Photoshop or another image editing program. The finished design should virtually match the final product (the elements, colors, images, fonts), except that the text can be inserted until the staging. It should be remembered that the design development includes not only the main page, you must also develop a sub, and maybe "alternate versions" for mobile devices, or any other special purposes.

Always confirm the finished design with the customer before continuing to the next step. Then go back and redo it will be harder (more time consuming). Be sure to pay attention to this nuance of the customer - imagine yourself that you have completed all work on the coding or installing the cms, but here the client suddenly changed his mind about the design. This, of course, it happens, but it should be to minimize risk.

Created by

At this stage we need a "picture" (detailed design) to make a living site. This stage is different from the webmaster varies considerably. It all depends on how, on what basis and for what CMS (if any) you write the code.Experienced artists are usually already have a pre-made "blanks» HTML / CSS, so after "cutting" the necessary elements in Photoshop, the process may take a markup is not too much time. Do not forget in this beautiful andcorrect HTML layout .

After writing, debugging, testing in different browsers, validation and error correction, you can proceed to the next step. Incidentally, after this stage I personally also give the result of the customer for approval, if the site is developed on the cms typo3 where you want to connect (to adapt) the generated HTML in the admin. If we talk about wordpress , then there is probably better to create a template without the "pre-layout".

Launch Site

If your site is perfect, "tweaked", and all works perfectly like it, you can finally publish it. Do not forget to check out all the good (good to have on this case prestart checklist), after the upload to the hosting site via ftp, once carefully all potestiruyte. In principle, you can do immediately to create the site hosting - in this case, first, do not have to "relocation site" from the local machine, and secondly, all tested in the real in the real world (and host settings), in- Third, the customer can monitor the process performance.

Site Support

It is not in the literal sense of the word stage of development, but to resolve the issue of support and further development costs in advance - will you address this issue, or the customer will be able to do everything himself.In addition, after the date of the site, developed by a management system (CMS) should provide the client with documentation on working with her, or a little training.

Read More →

Retro Style in Web Design

According to the American writer John Steinbeck, most people live ninety percent in the past seven in the present and the future is only three percentage points. Well, it counts Nobel laureate for literature is too difficult to verify, however, dispute the fact that the appeal of the events of the past is not necessary. If a painful sense of the value of passing time and the appeal of antiques you are familiar, perhaps, retro style in web design will be your skates.We can only think, will satisfy the concept of a retro-audience share. Who will be delighted with the content, masterly powdered antique? People who nostalgically peering into the symbolism of a bygone era, with its fashion, people, machines and other stories, covered with a dusty coating otgorevshih passions.

In clothing, automotive and interior design for a retro-style confident enough to tie the timing of the 20s to the 80s of last century. Writing a clear time characteristics of retro-style in web design is not easy, because in everyday life can be considered the last day, in a rapidly changing IT-sphere can be safely called day before yesterday afternoon. And the fact that thirty years of the artist still finds it relevant and modern, youth has long been written off for scrap. Take, for example, the results are disappointing for producers rent the movie "Alien": Bandit romantic swashbuckling 90 not stir the soul teenager, as retro - it is each his own.

But the more interesting and more difficult to challenge for a designer who decided to work out the style of the site is in a retro-style. Only the knowledge of the nature and characteristics of retro-style, coupled with a considerable sense of proportion, will not slip into a banal kitsch.

Most of the time intervals that can safely operate a designer decides to use the retro style, tied to the fashion of the 20th century.

Want to recreate a visitor feel aggressive chic 20-30s - help him remember the muse of Vladimir Mayakovsky Lilya Brik, good will and Ellochka-cannibal from "The Twelve Chairs." These were troubled years of sudden and massive women's emancipation: women wearing pantsuits, shortened skirts and smoked long cigarettes. All of these mesh stockings, knit hats and bowler hats a la Charlie Chaplin, bare arms and shoulders in a fur boa during the NEP, notably stirred the blood of man in the street. Take the olive, black and purple color as a base, add the drive of jazz improvisation, story and cinematography airplanes - and you can easily catch the essence of retro-20's and 30's!

If you no longer taste restraint and modest elegance L - look back in the postwar 40s - 50s . In place of ostentatious vulgarity and pretentiousness new look came a style invented by Christian Dior. Style sensual, decadent, recklessly romantic, stylized "krinolinovy» XIX century. It airs raised chins of women in dresses of silk, satin, crepe de chine. This is a thin waist, neckline exciting and gloves to the elbow, wide-brimmed hats and patent leather straps that boost to the limits of femininity polupristoynogo pin-up. Review "The Notebook" Nick Cassavetes and "The Godfather" by Francis F. Coppola, include Glenn Miller Orchestra recording and quickly grasp the tablet. Have you caught the mood.

Would you like to bet sexuality and sensuality - Browse through magazines 60s and 70s . While the tone was set seductive film star Brigitte Bardot, Marilyn Monroe, Sophia Loren. The color palette matches the mood - it is the dominant red, pink, blue in the range of flowers, polka dots, the cell. Car rides chic "Bentley" on a dizzying seditious motives of Elvis. The Beatles "they" VIA "Gem" - the "us." Denim 70's, platform shoes, disco dancing to the music and the sea of synthetics in clothing: nylon, nylon, krimplen wild colors. ease, brightness, ease - that's how it will be possible to describe the site in a retro-style 60 - 70 years.

It may be an unusual experience in the style of Soviet culture of the 80s of XX century - a time when the ideology of the ruling party kultprosvetovskaya staggered under the chaotic but powerful blows protest basement subculture. Emerged from the underground Soviet Russian rock and punk rock mixed with dance tunes broken disco 80's became the leitmotif of Surgery. This period is not so deeply redesigned web designers, so the decision to use the style of the '80s can bring great success.

To sum up. Retro-style actually quite stable and marketable trend in web design, with its charm and unique color palette. What would you choose: tragic nepmanskie 20th, 50th caramel, floral 60's, disco 70's, or nomenclatural retro 80's, building on the past, adding to their feelings and are actively using rich graphic editors, you able to create a small masterpiece.

In addition, color palettes can be retro-inspired style in a small collection of retro designs (for a particularly interesting instance you can go through a reference on the original sites and see how everything is done).

Dallas Advertising Agency - a very original navigation, music in the background and a military general, a retro style.

Lana Landis - on the implementation of flash, always check out the photos :) beautiful vintage photos + wonderful music

ThunderFuel - as far as I understood the company is engaged in everything from design, to animation and games.After reviewing their site in flash retro style, I'd have ordered something cool idea and implementation.

Site-portfolio Michela Chiucini web designer - by the way, it is her past work, we see that it is clearly not indifferent to the retro style

Kultika - I do not understand the purpose and subject matter of this site, but the implementation just beyond all praises!

Diseño Grafico - cool retro-style poster for the Web developer studio or freelancer, he seems to be stretched in a line and when you click the picture moves to the right.

Tennessee Vacation - for all lovers of the State of Tennessee, and leave in those parts, very cool implementation of a retro-style, where attention is given to almost every detail, one of the best sites in a similar style that I've seen

Here's a collection of web design in a retro style has turned out. In my opinion, very good work here presented, although, of course, retro sites exist on the order of magnitude. And that means that I need to Find and publish as early as next time.

Read More →

How to make a website easy. Usability by Steve Krug

Looking the other night in my mail and found it an interesting letter from the publishing house "Peter." If someone had told me something similar institute in distant years, when does the reading of some books on computer topics, would never have believed it. Now, given my profession blogging and authorship of the project design Mania, they offered me a little bit, and collaborate together to tell blog readers about an interesting book. The practice, in principle, quite typical in the blogosphere, so of course I gladly accepted. For the theme of the project is best suited Steve Krug book " How to make a website easy. Usability by Steve Krug on a method . " And if the web design for me is more a hobby than work, the creation of the site and the question of its effectiveness - the theme is much more intimate.

To begin with a few words about the author. Steve Krug (Steve Krug) - usability specialist, bestselling author in the same yuzabilti "Do not make me think." He works in his own consulting company, has a great many years of experience in the design of interfaces and overgrown with usability testing.Boasts some of the most renowned for its customers such as Apple, AOL, the IMF, Bloomber.com, etc. Most of the time Steve Krug is engaged in conducting seminars, well, just consulting.

Honestly, before the book came in the mail "by the method of Usability by Steve Krug" only known to me was the usability experts , Jakob Nielsen .Now, we can say, I expanded my (and yours, I hope) because the horizons of what Steve has to tell the public. After the first book, "Do not Make Me Think" Krug has become a very popular specialist, began to actively organize seminars, advise, and then at one point, he says, in a weak moment signed a new contract with a publisher.

For example, the question of whether this world need another book on usability testing? You can read the following.

I did not invent the wheel. Usability testing has come into our world long ago, and many famous people, the most influential of them - Jakob Nielsen, more than twenty years of preaching the idea of ​​"affordable usability testing."

There are several wonderful books, which explains in detail how to test usability. I strongly recommend that you read at least one of them, when you happen to do testing. His favorite book on this theme, I have listed in Chapter 15.

However, this book differs from existing in at least two aspects.

It is not comprehensive. I guess you did not become usability and will not be a matter of life and that this word is not even in your job description. If so, you will not necessarily know all the nuances and spend a lot of time on their comprehension. This book, like the previous ("Do not Make Me Think"), I tried to make a sufficiently thin (200 pages), so that it can be read, for example, in the plane.

This book is written not to make you an expert on severe or usability testing. It is necessary for you to know which end to approach the testing itself. Some of you, of course, this theme will entice enough to need to know about it as much as possible. For these and I wrote a chapter 15. But in general, to be tested and get this huge impact, not to know anything more written on these pages.

This book is not only about how to find usability problems . Unlike many other publications, this also explains how to fix identified problems.

I can confirm all these words are 100%, though I am very involved (or rather did not do) usability, but from the first page was simply a human interest. And given how quickly read the book to find out all the details of this process somewhere along the road to transport or a rainy autumn evening - simple. In addition, such a reading also draws from the other side, that all this is really an invaluable experience, "knowledgeable" person.

And it is interesting that the question, " And your tips are only suitable for web-sites "you can find the answer.

In writing this book, I focused on testing sites, because these days most need this, and because it is possible to make the book a thin and simple. But exactly the same methods and principles can and should be used in testing and improving the whole, than are men. Network and local applications - is the most obvious sites for testing, but no one bothers with the same methods to estimate the ballots, cell phones, presentation, laid out in PowerPoint, Digital fotikom instructions and forms that you fill out when it comes to the doctor. I would suggest to you, wherever I have written "your website" to believe that it says "your product".

Actually it would be logical to continue to publish the contents of the book "Usability of the method by Steve Krug."

The discovery of usability problems

• Chapter 1. Elephants, it can not see 20. What is an independent usability testing, why it always works and why it is so rarely performed.
• Chapter 2. And now I saw cut my [excellent] assistant in half. In what looks like an independent testing
• Chapter 3. One morning in the month - we do not ask for more. The plan, which you can easily follow the
• Chapter 4. When and what to test. Why are the most difficult has to do first
• Chapter 5. Do not hammer nails with a microscope. Who to test and how to find these people
• Chapter 6. Take them to task. The choice of targets for testing and scripting
• Chapter 7. A few boring checklists. Why they should be used, even if you (like me) hate them
• Chapter 8. Telepathy without tension. Testing
• Chapter 9. This is somewhat similar to the sport. How to captivate all the match and what to bring to their attention

Resolving problems with usability

• Chapter 10. "Debriefing". Compare experience and decide what to eliminate the shortcomings
• Chapter 11. Less is better. Why fix problems should carry as little as possible actions
• Chapter 12. The Usual Suspects. Some of the problems that you will surely find, and thinking about their elimination
• Chapter 13. Life has become better, life has become happier? The Art of pleasant manners

Just go!

• Chapter 14. Teleportation without tension. Remote testing: fast, cheap and slightly uncontrolled
• Chapter 15. Only for advanced users. A list of recommended literature
• Chapter 16. Good luck, friends. A few parting words. An example of the script and the agreement on record

In general, usability testing can be very simple and informal employment. You just need to find time for it and read the book :) Steve Krug said as he held seminars that they say, first of all the assorted audience of a site for an example, and then decided to introduce an original method. He allowed himself participants usability testing - how it was raboaet :) That is the site is taken as an example and volunteer to perform some common tasks for which this is the site and set up.

Test results are almost always the same:

Talk a good time testing and eventually breaks a storm of applause for his bravery.

"Owners" of the site, all 15 minutes furiously writes, what problems must be solved, and asks whether it is possible to obtain a record of what was happening to show your team and your boss.

Others come to mind, "Heh-heh. Is that all? So I could. "

Upon completion of testing, I ask: "How do you think is worthwhile way to spend 15 minutes? - And all under the nod.

So if you somehow are building high-quality and user-friendly site, you can safely buy and read the book " How to make a website easy. Usability by Steve Krug by the method of "online publisher Peter. In the same way, find a small piece, but rather one chapter from the book.

Read More →

Power on the Redesign of the Examples

Sooner or later even the most successful design to date. Sometimes you can get a slight redesign, and sometimes require radical renewal, referred to as rebranding. Very often these processes began to appear with the acquisition of the popularity of so-called design style Web 2.0 , which simply did provoke a serious company for updates and follow current trends.

From the standpoint of the integrity of the brand's radically new design is not always acceptable, in at least a step risky, because that way you can lose face. But even those who are at risk was up to "moderate" is not a revolutionary redesign. Let's look at examples of how to solve this problem (and solved) the designers of famous sites. As inspiration, has been used , this English-language paper , reflections are copyrighted. First published on the old design, then a new one.

31Three

During the redesign was otherwise decided 31Three space (it was more) and changed a few colors, why design has become more "pure" and "air." Perceive the information has become much easier once it is clear that the page has the greatest value. Definitely a successful redesign, or should I say effective - catches.

Brightkite

Brightkite has undergone major changes. The new design got rid of the heavy dark-blue substrate to replace the cap had come a lightweight upper panel. Visually zaokruglennye angles acute and successfully replaced by "splitting" last version, the big headlines emphasize the key parts of the project. In general, the new design creates the impression of a comfortable and well made. The previous version looked less than professional and integrity. The redesign was a success.

Ollie

In my opinion, the site is only won by Ollie redesign. The old one was too dark, dirty and a bit chaotic (this applies to both elements, as well as flowers and other things). The new design is in sharp contrast to the fact that it was, it is close to minimalistchnomu - a little strict, but neat. The only "a quote from the past" - a logo, which, however, fit quite harmoniously. Although my impression of a matter of taste, some people may notice that the old design could be more creative and stylish - it is quite possible, and sometimes because of the redesign is the author's desire to change something, sometimes dramatically. I think this is the case.

N.Design Studio

The project site N.Design Studio was always very bright, expressive and powerful in terms of design (which they say "showmanship"). Despite all the advantages of the old design become boring.

The new version of the design is small enough in common with the previous one. However, done very cleverly, keeping the continuity of the least of it. The new design may be surprised (those who are accustomed to the old), but leaves the impression of an extremely favorable.

DelCastillo

Designers working on DelCastillo decided on a bold step. The original version of the site showed a quiet traditional design and layout, the new version - a bold, "the log" layout, typography and vivid emotion. Such a redesign may be called for something extreme, but nevertheless, most successful rather than vice versa. In recent typography in web design is more and more weight, probably, the authors decided to comply with the new fashion trends.

Design Cubicle

The first thing that catches your eye in the new design Design Cubicle - considerably fewer elements. The second - the design is almost centered. The new design "easier", more convenient, while brighter (even if you do not confuse the bright umbrellas in the screenshot with the old design - it is an illustration of the post, not a design element). The desire for minimalism and concentrating attention solely on the contents - is also very popular for modern web design.

Carbonmade

The new version of the design Carbonmade also very different from the previous one. The old version was obviously too heavy (which was the fault of mourning, a vast gray area under the cap). The new design is based on the idea of graphic (in the center of the mountain, rich in illustration), it is more clear, positive and creative. Visually looking at the page of the site, personally I remember such a thing as infographics , which is often used in the design for the presentation of information.

I often want to do for his redesign of the blog, sometimes almost dramatically change everything. Unfortunately, this is not a quick and easy process, so until that time is not enough, perhaps in the future, I still come to that.

Read More →