WEB DESIGN TREND 2015 เกาะติดเทรนด์การออกแบบเว็บไซต์


เป็นที่รู้กันว่าสไตล์และเทรนด์ของการออกแบบจะปรับเปลี่ยนไปตามกาลเวลาและสภาพแวดล้อมต่างๆ อย่างก่อนหน้านี้ในปี 2013 – 2014 ที่ผ่านมา สิ่งที่เราจะเห็นได้ชัดเจนก็คือเรื่องของ Flat Design ตอนนี้เรามาดูสิ่งที่เราคาดว่าจะได้เห็นในเทรนด์ของการดีไซน์เว็บไซต์ในปี 2015 กันบ้าง

  • Lettering

    แนวการออกแบบตัวหนังสือสวยๆ แบบ Old School Typography , Calligraphy ได้รับความนิยมมาอย่างยาวนาน ซึ่งในปีนี้เราน่าจะได้เห็นการหยิบเอามาใช้ในงาน Design และบน Website มากขึ้น หากนึกไม่ออก ลองนึกภาพป้ายร้านกาแฟที่เหล่าบรรดา Hipster ชอบไปรวมตัวกันดู

แนวการออกแบบตัวหนังสือสวยๆ Lettering

http://welovetypography.com/post/11117

  • Photography, Video, Not pattern

    เราได้ผ่านช่วงเวลาที่นิยมการใช้ Pattern หรือ Texture มาเป็นพื้นหลังส่วนหลักของ Website กันมาแล้ว หลังจากนี้จะเห็นการใช้รูปภาพที่มีคุณภาพมาบอกเล่าเรื่องราวแทน หรือแม้แต่การ Blur รูปเพื่อเพิ่มความโดดเด่นของ Message ให้มากขึ้นแต่จะไม่ใช่แค่ Pattern เพียวๆอีกแล้ว อย่างที่มีคนพูดไว้ว่า รูป 1 รูปแทนคำพูดได้เป็นพันคำ

www.orobakerybar.com

www.orobakerybar.com

  • Responsive design

    Trend ของ Responsive Design เกิดขึ้นมาซักพักจนตอนนี้กลายเป็นสิ่งที่ “ต้องทำ” ไปแล้วหากคุณทำ website ขึ้นมาตอนนี้ โดยอ้างอิงจากอัตราส่วนยอดผู้ใช้ Device อื่นๆ ที่เพิ่มขึ้นอย่างมหาศาลและหลายคนก็ไม่อยากพลาดเค้กก้อนใหญ่นี้ไปเฉยๆ

www.marvelic.co.th

www.marvelic.co.th

  • Material Design is everywhere

    ตั้งแต่ปีนี้ไป (และน่าจะไปอีกนานพอดู) เราจะเห็นแนวคิดแบบ Material Design เต็มไปหมด เพราะมันไม่ได้เป็นแค่ธีม แต่มันเป็นแนวทางการออกแบบ UI ที่ให้ความสำคัญกับทุกด้านไม่ว่าจะเป็นสีสัน, สัดส่วน, Layer, Motion และส่วนอื่นอีกมากมาย ที่สำคัญมันแก้ปัญหาการลำดับความสำคัญขององค์ประกอบในรูปแบบของ Flat Design ได้ดีเลยทีเดียว (ถ้าอยากทราบรายละเอียดเพิ่มเติม ลองกดดูเนื้อหาเกี่ยวกับ Material Design ของ Google ได้)

Material Design

  • Scroll not click

    การบอกเล่าเรื่องราวบน Website หลังจากนี้จะเริ่มปรับเปลี่ยนจากการกดเพื่อไปดูรายละเอียด เป็นการเล่าเรื่องราวต่อเนื่องไปเรื่อยๆในหน้าเดียวกันมากขึ้น โดยน่าจะมาจากการที่คนเปิด Website บนมือถือมากขึ้น ทำให้การ scroll ลงมาดูเนื้อหาทำได้ง่ายกว่าการกดเพื่อเข้าไปดูรายละเอียด ดังนั้นหลักการออกแบบ Website จึงต้องปรับตัวตามไปด้วยเช่นกัน

Material Design

www.cmsplugin.com

ขอบคุณ marvelic


Feature List Icons

Startups, mobile apps, and creative agencies like to use graphics and blocks of text to outline their features. Most of the time you’ll find these features on the homepage in a list of pithy sentences coupled with small icons.

To my knowledge this trend has no official name but I’ve coined the moniker feature lists. These are text-based lists which often rely on icons to help describe the features being listed.

Features could include the services provided by a startup or the characteristics of a piece of software. This trend has become very popular and it’s been adopted by hundreds of various websites.

life360 startup features list homepage

Life360 is a mobile app for collecting photos and life memories. Their landing page design is well organized and uses a pristine collection of features with icons.

Towards the bottom of the page you’ll notice some features that are broken up into horizontal rows. Each row starts with a small heading and lists three features alongside each other. The features also use icons to convey a visual meaning.

This is the traditional use of feature lists but there are deviations.

silverpush website icons feature list

Take a look at the Silverpush homepage which uses a somewhat expanded version of this technique. The icons are paired with sentences covering a quick how-to process for using the product.

Feature lists don’t always need to list features, but could alternatively go in-depth about how to perform certain actions. This is great for explaining how a customer would go from purchasing your service to the final outcome. I encourage designers to build on top of this trend and find new uses for icons and snippets of featured content for explanatory purposes.

Galleries & Slideshows

Modern websites can run pristine dynamic galleries and media slideshows on any screen size. Mobile smartphone browsers have come a long way combined with responsive design techniques.

It’s possible for a new web designer to pick up a simple responsive carousel plugin and code it right into any layout with ease. Code libraries are released for free and open source plugins come with fantastic documentation. jQuery makes frontend development even easier and this trend has skyrocketed into stardom over the last few years.

tokyo london agency website slideshow

The fullscreen slideshow found on the London design agency Tokyo is stunning. Each slide represents a case study from client work and uses a fullscreen background photo relative to the project. The homepage feels clean, smooth, and very easy to use.

This is the foundation of any unique image gallery or slideshow. Digital media has become so commonplace that visitors practically expect it on every website. As the designer it’s your job to figure out the best method(s) for adding media into the page which can also be easy to use.

For the time being it appears that jQuery is the quickest and most efficient way to create galleries. You just need some images and a bit of time to play with the setup. As trends advance I expect to see more animation and other techniques built into media galleries for the web.

Dynamic Storytelling

Parallax design is most certainly a well-respected trend. Designers have fallen in love with parallax websites for the creativity and the beautiful presentation. Developers also love to release free parallax plugins which feed into a cycle of growth.

By digging deeper into parallax design you’ll find another trend: the art of dynamic storytelling.

Almost every website has a story to tell – but content isn’t always laid out in this fashion. Parallax layouts feel more natural for storytelling because they mostly rely on a single page. Graphics, text, animations, and page sections are accessible without ever reloading.

movement of data parallax website

The Movement of Data website is a perfect example. This parallax layout scrolls both vertically & horizontally using motion as a visual cue for storytelling. It’s a way to advance the website’s content while also maintaining interest through visuals. Many parallax layouts follow this same technique for motion and dynamic effects.

But also keep in mind that successful storytelling requires great content. Parallax layouts make content consumption easier because it’s found in sections and is accessible from a single page.

The best parallax designers will learn how to combine graphics, animation, and content design into one amalgamation of website ingenuity. Parallax design isn’t the only choice, but it tends to be the easiest. Whether you’re creating a parallax site or a multi-page site try to incorporate design with storytelling to draw fascination for the website’s content.

Fixed Sliding Navbar

Although fixed headers have been around for years the trend has recently advanced quite a bit. The vast majority of designers have taken a liking to fixed navigation bars which stay on top of the screen at all times.

One of the most common techniques is to blend the navigation into the header while at the very top of the site. When a visitor first lands on the page all navigation links appear as though they’re just part of the header section. But as the visitor scrolls down this navigation becomes fixed in a small bar at the top of the screen.

invision app homepage nav header

Invision App demonstrates this technique live on their website. The header section uses a dark video background where the links blend seamlessly. But as you scroll down these navigation links and the logo become fixed in a top white navbar.

Some designers like this effect while others complain that it takes up precious space on the screen. I think it works great when used on the right type of website. Visitors often appreciate being able to access navigation from anywhere on the page, so long as it doesn’t completely take over content.

themes kingdom fixed sliding navigation

Designers also like to add neat effects to these sliding navbars. Themes Kingdom actually shrinks their logo and navigation links when scrolling down the page. The very top header section offers more room so the text can spread out a little more. But while moving down the page it’s more valuable to sacrifice link size for more screen real estate.

The use of a small animated effect can really spice up this trend. If you’re designing a website with one of these fixed navbars consider applying a small animation or slidedown effect while scrolling.

Grid-Based Layouts

It’s tough to say exactly when the grid design style became popular but it is definitely a beloved choice by many designers. Grids have always played a role in web design but they haven’t always been clearly obvious in the final product.

Typically grid-based designs work well on sites that need large content lists. Webpages like social media feeds, online magazines, or photo galleries can all benefit. This trend of grid-centric layout design actualizes the concept of wireframe boxes into a full website design.

24ways design blog grid style design

24ways is a stupendous design magazine which has been online for years. Their design has changed many times and the most recent iteration relies on grids for post listings. Their homepage and archive pages all list content in a fixed and rigid structure of boxes.

The thing I love most about grid design is the flexibility. Responsive layouts are very trendy and grid-based design makes it so much easier to create naturally responsive websites. 24ways is fully responsive and you can see their mobile design by resizing your browser window.

pinterest board design website layout

I also really enjoy the Pinterest board layout which relies on grids as well. Pinterest is a little different because the grid boxes aren’t lined up perfectly, but instead fall into a seemingly disorganized pattern. In this case asymmetry works great and has become somewhat of a calling card for Pinterest’s website design.

There are dozens of tools and free resources for designers who want to try building grid-based websites. For example, frontend developers may dig into free CSS grid libraries which can be found all over the web. Those who are interested in JavaScript may alternatively try out jQuery Masonry which is a plugin mimicking Pinterest’s grid design.

Custom CSS3 Animation

Ever since the CSS3 specification was released developers have been hurling themselves onto the bandwagon of CSS animation. Web browsers are now more advanced to support CSS3 transitions and keyframes en masse. It’s only natural that as browser support increases there will be more developers getting their hands dirty.

One of my favorite modern effects is the scrolling page element animation. When a visitor scrolls down the page elements will fade-in or slide into view from offscreen. Carde app uses this effect on their landing page.

carde ios app landing page animated

Traditionally speaking, this effect does require a very small amount of JavaScript to handle the CSS classes. But all of the animations can be controlled 100% via CSS which only runs when the element(s) come into view. I actually wrote a brief tutorial detailing how you can recreate this effect for any website.

bjango svg hover animated css3

Another exciting but less-common approach to CSS animation is the use of SVG graphics. These stand for Scalable Vector Graphics which are typically created in a program like Adobe Illustrator. SVGs can be scaled dynamically and CSS3 is the perfect compliment now that modern web browsers can support both.

Take a look at the Bjango navigation bar and try hovering over some links. You’ll notice each one has a default and hover state which relies on SVG images. But the hover animation uses an elastic bounce effect which is applied to the SVGs through CSS3.

Admittedly this can be a tricky concept for new developers to grasp. But it shows how much CSS3 has advanced in just a few short years. As frontend web development trundles forward I’m excited to see what the future has in store for web animation.

Final Thoughts

Many new design trends continue to emerge with each passing year. I certainly hope the trends above can light a spark in designers both new and seasoned to the field. Web design is now more in demand than ever before, and a good designer should be able to deliver based on current trends and best practices. By studying what’s hip you’ll learn how to craft websites based on the needs of your clients and the needs of the design industry as a whole.

- See more at: https://webdesignledger.com/trends-2/web-design-trends#sthash.3xkSHlft.dpuf

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

clear formSubmit