How to break web design? Design of innovative layout and interaction

It's hard to envision and build innovative designs that are different from common site layouts, but once you do this, you can design the most interesting and fascinating websites.

You can see these sites almost every day, and every time you see them, you feel like, "I wish I could have thought of that." "Designers are doing a great job of designing a series of fine web elements that are not only available but also fresh and original," he said.

Unique styling, color combinations and novel navigation tools can be used to design the most interesting and fascinating websites.

These sites are equally difficult to conceive and build.

But you never know what might lead to a new trend, bring in a lot of clicks or "work" in a way you can't imagine. For designers and developers, the most important thing to remember in web design is to ensure usability and efficiency, no matter how attractive the look. By combining creative thinking with a careful analysis of key factors in the design process, each day produces novel and appealing ideas.

Thinking out of the frame

First question: Why?

When sketching a site, why do we always use rectangles? Why do you always use a particular type of color or font? Why are the photos the same perfect 4*6 aspect ratio?

Second question: How to be different?

More and more websites are choosing interesting and innovative layouts to answer the second question, using rounded shapes, dramatic images, and possibly inconspicuous colors to navigate and scroll through the page in this new way.

Basic concepts

When we develop some new concepts, the key to breaking the existing patterns is to keep the basic concepts in mind. No matter how cool the site looks, it must satisfy readability and usability, otherwise users will not be able to browse the site and interact with the content.

The design process should always think about the behavior of users, think how they understand and use the site. If your users are super tech people, the navigation or scrolling design will be highlighted if you have a little bit of a problem. But if your users are computer-white, you may want to focus on the most basic navigation tools.

It is purposeful for users to visit your site. When they get into the site, they want to be strong enough to show. Make sure your design can express the real purpose of the site-provide information consulting, entertainment, business, and so on.

Don't try to do a lot. Pick an interesting idea and do it, but don't try to do a lot of things at the same time. Remember, if you have too many things on your site, users will not stay on top of it. Find an interesting and unique way to interact with them.

Five web site instances

So how can you combine creativity, readability, and usability with the perfect combination of these features? We can take a look at these websites and they are doing something new, unexpected and quite wonderful.

Lowdi is doing a terrific job of creating visual interest through some unusual graphics. Each color block not only has some particular form of rounded corners (or the rounded corners of the reverse), but also the shape of these blocks is similar to the product sold by the company. Even if you don't look at the Lowdi box on the screen, you'll think of him. By scrolling, the box (actually a loudspeaker system) communicates with you through a series of pop-up bubbles. This idea is interesting, fresh and fascinating.

Website address: https://lowdi.com/

Steve Vorass the popular "hidden navigation" design on his personal work site. The site at the top of the screen shows a simple project, work, contact a few modules of the navigation, but the picture on the page also has the navigation function. Each of the different pictures jumps to a different item. More importantly, when your mouse hovers over the picture, each picture prompts you to click on the content. The design of the entire site is simple, and the same is true for these unexpected animations.

Website address: http://stevevorass.com/

Caava Design has outstanding performance in the selection of pictures and the fun of graphics, but the more creative lies in the designing of rolling. The design of the entire website is based on this manifestation of the timeline. Clicking on each picture will show the content of another dimension. The special thing is that you don't even need to navigate through the timeline and get to know the site. The website structure is clear, the design is excellent.

Website address: http://www.caavadesign.com/

Joint positioning itself as an innovative business design. And his website illustrates this. Each page provides a clickable selection area for navigating. The design is simple, only use the gray-white system (excluding the color photos in the blog), but the mouse hover animation effect and the readability of the site is amazing. When you choose how to browse the site, this will make you want to continue to click.

Website address: http://www.jointlondon.com/

Ballantyne the results of beautiful pictures, interesting graphics and cool scrolling effects to attract users ' attention. The case of this fashion retail site tells us how to show the company's information in a way that shows the mass of products. Each time you scroll up three pictures, a new picture is displayed below. Scrolling lasts in a few screens, so you can't help but see what happens next. In addition, this character-rich bevel shape makes the entire picture flow more linear and more interesting.

Website address: http://www.ballantyne.it/

Summarize

For years, I've heard designers say: no more original ideas. That's a bad idea. Every day, new technologies and devices are changing our thinking about web design and design processes. Get out of your comfort zone, go out and get a brainstorm, and then take the idea back to work to ensure that all the elements that are essential to availability are included.

Also remember that some "crazy" ideas may fail. It's no big deal. Summarize, keep learning, and then start the next great idea.

Thank you for your reading, this article by Tencent Isux Copyright, reprint, please specify the source, the offender will investigate, thank you for your cooperation.

Annotated source format: Tencent Isux (http://isux.tencent.com/creative-web-design.html)