"Reprint" 20 of the 2013 most noteworthy web design trends

Original post address: http://ued.lanrentuku.com/di/2013wangyeshejiqushi.html

Over the past year, we have seen a growing trend in web design. Maybe some of my friends still remember some of my earlier articles about web design, interested can be clicked to see, now we can see that many of these ideas have been achieved, and some have adopted some of the higher level of novel ideas. In today's article, I will share with you a new trend towards more than 20 web design in 2013 years.

The impact of design is only a feedback from our culture and user interface perception. The concept of these trends represents the most popular idea in the web design community. But when it comes to the design team, it comes to the idea that designers have their own independent views, so be receptive to them.

1. Responsive layout

The responsive design has become a final entry for the layout of the design to fit a variety of digital media windows. This idea is used to support all the devices from laptops, desktops, smartphones, tablets and any future will be released.

You should imagine that this trend is more like a single piece of code that works perfectly in the design of a unified Web page in all environments. Responsive sites are often imagined to cater to mobile browsers, but that is not the only purpose. You can also have a responsive site with a larger browser window that allows you to add vivid illustrations and patterns to your page layouts.

The point here is to think about site design as a single artboard for both dynamic and natural fluids, and CSS3 media queries allow developers to customize the layout on a limited or extended screen, using this to increase your advantage and see how other designers are practical.

2. Retina Support

With the responsive support site layout, I also found that there was a noticeable increase in the number of people who built stations for retinal devices. Apple's first practice of this idea was on the iphone4, and since then Apple has also applied a Retina screen on their other devices, including the ipad and some MacBooks.

Retina screen pixels are basically twice times the size of any other ordinary LCD, although they have the same physical dimensions, but the retina screen can use twice times the digital image to adapt to the same physical size.

This means that the "pixel perfect" web designer will be making two sets of picture formats. To support retinal devices. First you need to make your sample image twice times the resolution of the normal picture, and then save the standard version of the picture. Large-resolution images will be scaled down on the standard resolution screen and look sharper on the retina screen.

One of my favorite responsive web design tools, Retina.js, is a JavaScript library that allows your users to automatically display retina images whenever they use a retina device.

Although it does not detect the CSS background image, it is still used to avoid writing down all of the case code in the media query resources.

3. Fixed header entry

Using the CSS Position:fixed property is the best way to keep your header entries pinned to the site. When the user scrolls down your page, this method provides a static navigation and a path back to the home page. This trend has been going on for some time, but now we see its full power.

Because they can work almost anywhere on any website, so it looks interesting. They include social networks, blogs and even design studios or private companies. This design is very popular and looks like a lot of layout. But from an aesthetic standpoint, this fixed entry provides a special user experience that reduces the sense of distance to the Web site.

4. Large picture background

Photographers or photography enthusiasts are sure to enjoy this design trend. I've seen countless cases to discuss the idea of using oversized images as backgrounds. This is a great way to get the user's attention and looks great when it's done properly.

When the big picture is pleasing to the eye, I slowly like them, when you put this big picture to do the background of the idea of integration into your design, such design technology, in the market will make your website appear more professional. At this point I always think of the once popular Kerem Suer design works, for every user who login to his site design a very personality background picture.

5.CSS Transparent

The new properties of CSS3 have allowed you to edit the opacity of any element on a webpage, which means you can make it transparent in a modern browser without using Photoshop. This transparent web design trend has recently been discussed with some very lively topics on the codrops.

An excellent example of this is on the Squarespace blog, where the middle layer of the page gives a background:transparent; properties, typically it can be applied to generate some other tiled background, or set internal elements as background.

Another design technique to manipulate transparency is through the RGBA () color syntax, where you can specify specific red, green, blue, and transparency when writing CSS, so using RGBA (255,255,255,0.6) generates 60% opaque white, which is a design trend, So in 2013 and beyond we can still have expectations!

6. Minimalist landing Page

Anyone who spends a bit of time researching the market will understand that online sales are simple and smart, that you have access to consumer groups anywhere in the world, and you can sell non-physical products such as videos or creative stuff.

Creating a simple landing page on the web is to get a guide to your product or service. This new trend pursues a minimalist creed: keep everything simple while focusing on your core products.

There are a number of beautiful low-cost image sample resources on the Pictopro webpage, a page that uses vector icons as a background is quite dexterous, and the text is easy to read, in fact it's a one-click checkout process, and you can't do that more succinctly than that.

7. Digital Fast Response code

The proliferation of QR (fast-response) applications has been caused by the adequacy of smartphones. It represents quick Response code, which starts with the early UPC QR code, and you can find this label from the restaurant informing the location of the event and the car sales in many places.

But lately I've found that some sites have cleverly incorporated coding into the design because they are often printed, so you rarely notice them. But as time grows, QR coding becomes a popular trend due to faster data transmission. You can see the stark example of this technique on the Keith Cakes contact page.

8. Social media tagging

Network Marketing is the basic determinant of success or failure of a website. Social media and viral marketing broke out on many different sites, and Digg was once the overlord of the field, but it has now been replaced by rival Reddit. But that doesn't mean there are only two sites that can share a mood story online.

You can retrieve the share tag from any social community, so you may find a good solution. You can put these sharing tags anywhere in your layout. This design has a positive side to some readers or fans who are eager to share content on Facebook,twitter or LinkedIn.

Below I have listed a small number of social media tags that you can try on your site layout.

§stumbleupon Badges

§google +1 Button

§pinterest Buttons

§linkedin Share Badge

§hacker News Vote Badge

§dzone Vote Buttons

§free Social Media Icon sets–best of

§100+ remarkably Beautiful Twitter Icons and Buttons

9. Detailed illustrations

The new design trend is all about capturing and controlling someone's attention, and I personally feel that illustrations can do the job well. But the problem is to find a designer who can do such a flawless work of art and teach himself.

Illustrations can be used in a variety of ways to give your site a different feeling. Look at the Internet and you'll find that many galleries and illustrations sites are focused on electronic illustrations. You can see that such an aesthetically pleasing job ultimately fits perfectly into the site's brand, and MailChimp may be the most iconic example of a chimpanzee postman's trademark.

10. Unlimited scrolling

Infinite scrolling has been around for at least a few years, but this technology has not become mainstream until this year, and I think it will continue in 2013.

Pinterest has adopted this loading technique for their layouts and it works perfectly, you can search for anything and when you scroll down the results page will continue to load, the paging is basically not a problem, even the user experience will not affect the discussion for the simple design.

But another very good one is perhaps my favorite example is in Tumblr. You can post a blog and extract all of the photos that appear on your panel as you follow them. So when you log in, all recent posts will appear and scroll down the page wirelessly.

This is an excellent technique, but it does not apply to every layout. But for the site to adapt to this approach from the visual and performance is quite amazing.

11. Homepage Features Tour

New products on the web are common by scrolling through picture shows and sample videos. Landing pages and new pages often try to lure potential customers with some sweetness. If you know how to build things well on the site, it will be very useful.

Review 2012 I would say the best example of this trend is Mediafire's homepage. The entire head of this page is scrolled between a series of slides. Each slide shows what you can do at Mediafire while explaining their features compared to other sites. Helping with this example is still highlighted by the large illustrations and icons they use. This is a trend that is not suitable for all stations, and you can only attract more attention for certain products.

12. Slide the page panel

In the past, when Flash and ActionScript were popular, rolling websites were very hot. Now, the effect of the move can be achieved through JavaScript and jquery, and in turn affect the way designers build websites. I was accidentally fond of rolling panel technology and wanted to see more in 2013.

Right away, you might think that Captaindash is an ordinary website, but when you click through the navigation, you will find that each page is driven by the left and right continuous loading. The effects of these moves are not always a good omen for mobile phone users.

If you can handle them in a responsive layout, or if you have a mobile site to choose from, the scrolling effect will be cool on your phone and worth a try!

13. Mobile Navigation Switch

One of the hardest questions when it comes to responsive design is how to create a reliable navigation. You want to give users direct access to all of your important links, rather than drowning them in a page and making them unreadable. It's also a good idea to keep the navigation hidden until you need it.

Go to the Mobile Navigation switch menu Beautiful design trends, treehouse blog is very few of this technology in the smartphone and PC-side browser performance is one of the most dazzling examples. But there are many sites and studios that use this trend in their personal responsive layouts.

My favorite navigation switch is that you can design navigation in a variety of ways, either by navigating from the head to the bottom or swiping down, or pushing the content around. Designers have many choices to play, but it takes more time for the UI experiment.

14. Full-screen layout

Earlier I mentioned the use of large images as the background of the site layout, this trend can still extend to the text layout, the design of your website text fully adapted to the browser. Some users may feel annoyed, but this is not always the case if the layout is appropriate for oversized text.

Alex Pierce has a great web site that focuses on layout layouts, and you can see rich text effects with CSS3 properties. In addition, this site is easy to navigate and many other elements of the page display is also very large.

The unique big font style can be as prominent as a large picture, and I'm sure that in the new year we'll see more reviews of this design.

15. Programming interface and Open source

Open source software has been around for decades and has changed the web since it existed. But in 2012 years I noticed more about open source software that involves Web components, layouts, and dynamic effects. Typically we can talk about free site templates, layouts or CMS software like WordPress.

Open programming interfaces and resources like GitHub not only allow designers to prototype layouts, but also create animations and effects on the page. jquery In fact has countless plugins available for free download on the Web.

Honestly, I don't want open source projects to slow down at any time, and now is the time to start and promote knowledge in the domain of creating sites.

16. Depth Box Shadow

I have discussed CSS3 's box shadows in the 2012 article, and this trend has been proven to be very accurate. In fact, I often want to see the effect of adding a box shadow to a modern web design. This effect looks magical, and they never deviate from aesthetics unless overused.

I believe that the problem designers encountered in the previous years stems from the box shadow is too difficult to achieve easily. Pushing forward for a few years, this effect requires JavaScript or a shadow background in Photoshop, and now the shadow box can be generated using a few lines of code in the CSS.

I will pay attention to the box shadow effect throughout the 2013. I think the effect has been ingrained in the design community, and now it's more about who is most creative in achieving the box shadow effect.

17.CSS3 Animation

CSS3 the Transition property with the associated browser prefix allows the CSS to implement JavaScript-like animation effects. Designers can now animate with different CSS properties. I have many hover effects and form input fields that properly use the transition effect.

Another excellent and exciting example comes from CSS Alerts tutorial on Codrops. Tips on how you can set the time for various different animations.

I am confident that new designers will push animations that do not pass scripts.

18. Vertical Navigation

When I first noticed that different sites were using this trend, it wasn't very interesting. But over the past year, I've seen more and more designers create the perfect vertical solution. When this layout is completed correctly, the vertical site layout can accommodate sufficient content while having a good design experience.

The combination of Riot industries is a good example of a new designer. Take a look at how the navigation links work, and how the effect of the entire combo move is achieved when moving up. The border texture does show a split line between the left and right columns.

The texture effect also appears on another vertical layout, such as the CSS Gallery design bombs.

19. Single Page Web page design

Single page design is a big topic, covering a number of different site categories. It's obvious that the World Wide Web created a single-page Web site. But in recent years this trend has become a more natural user experience.

The Web site I want to design for the cage app may be the best of the examples listed in this article. They use a single page layout to display content in a clear, horizontal layout. But you'll also notice that the top of the page has a blurred background image effect.

As you scroll down the page, the navigation bar remains fixed at the top of your browser. Merging other web design trends into a single page layout inside is a solution that attracts users ' attention and creates a fascinating site.

20. Circle Element Design

This circle design trend in the site layout is relatively new and has been given a lot of attention. Designers like the circle design because they are clean and tidy and generally fit into any block layout. You can build your circle or change your page elements to a circular design (such as user avatars, share buttons, publication dates, and so on). ‍

The Lucia Soto combination is basically a great example of a circular web design. This site is created dynamically so you have to move the different clips horizontally on the page. You will also notice some cute vector artwork as well as dotted gaps. Web designers crave These extra tidbits on the page layout because they reveal uniqueness.

You can find a simple example on the Site Optimizer home page, which uses the circular page design as the information selling point for their service.

Conclusion

When creating digital products, the user interface is the most complex topic. Try to make navigation and content styles a successful user experience. These design trends aim to give the designer the right direction.

I hope you can accept some of these ideas and think about how they affect today's websites. You can find these emerging trends on smaller global companies and all other sites. If you are reminding yourself to think about this curve and want to share the 2013 design trend perspective. Leave your comment in the discussion section below the article.

"Reprint" 20 of the 2013 most noteworthy web design trends