Mengilhami IDE: Innovation, Design & Entrepreneurship

Tren Desain Website 2013 di Dunia by Webdesignledger

13  – Beberapa tahun terakhir terlihat pergesaran besar dalam cara pengembang membangun website. Lebih banyak pengguna telah beralih ke platform mobile, beriringan dengan browser baru yang mendukung standar web HTML5 / CSS3. Ada ide-ide unik yang begitu banyak mengalir dari komunitas desain — sepertinya ambang baru sedang bergantian setiap beberapa bulan!

Dalam artikel yang ditulis oleh Jake Rocheleau dari WebDesignLedger, membahas beberapa tren terbaru yang cukup berkembang. Banyak ide-ide desain sudah ada di tahun 2012, tapi di tahun 2013 lah ide-ide unik akan semakin berkembang. Ada begitu banyak proyek open source dan user interface yang ditawarkan secara online yang gratisan untuk didownload. Hal ini menciptakan satu lingkungan di mana desainer baru dapat memasuki pasar dan menangkap tren yang sangat cepat.

Mobile First Design

Ide desain responsif tidak hanya terbatas pada website skala penuh (full site) yang bisa diperkecil. Bisa jadi membangun website versi ponsel ke tablet dan ke PC.

Merencanakan elemen yang paling penting pada user interface pertama dan menekankan masing-masing elemen masuk ke dalam tata letak seluler. Jika elemen tidak cocok semua, Anda harus drop beberapa. Bersamaan dengan itu Anda juga merencanakan bagaimana tata letak akan merespon tampilan browser yang lebih besar, misalnya pada tablet. Anda akan memiliki ruang untuk memasukkan sidebar, mungkin 2 sidebar, bersama dengan berbagai elemen halaman lainnya.


mobile first book webdev designing websites

Tampilan gambar di atas adalah sebuah buku kecil yang diterbitkan oleh A List Apart yang disebut Mobile First. Ditulis oleh Luke Wroblewski dan dia membawa banyak ide yang sama. Poin kecenderungan untuk mengisi interface ponsel sebagai prioritas di kalangan pengguna internet. Kebanyakan browser desktop akan senang dengan gaya tata letak, asalkan semuanya on. Ini jauh lebih sulit untuk membakukan pada platform mobile sehinga berguna sekali jika Anda memulai dari tata letak sempit ketika merencanakan untuk desain yang lebih besar.

Website ini juga telah beradaptasi dengan tata letak ponsel, tablet dan desktop PC. Untuk TREN DESAIN WEBSITE 2013 pada narasi berikutnya akan tetap dalam bahasa inggris :).

Infinite Scrolling

A number of social media websites have begun applying infinite scroll effects onto dashboards and timelines and user feeds. This effect was gaining traction due to the popularity of Twitter and Tumblr’s unique layout style. And now more recently Pinterest has also adopted this infinite page scroll on their homepage.

infinite scrolling pagination social media dashboard website interface

Designers may be asking why this is even useful in the first place. Sure it provides a seamless interface without reloading the page. But then users will have a difficult time generating permalinks for the different pages. And while all of this is true, it brings up the important point that not every website willneed infinite scrolling. I feel this trend works best when you can load information that doesn’t require a specific pagination style.

For example, blog archives seem like a poor choice because readers may want to go directly onto page 15 or 25 instead of scrolling down multiple times. But Tumblr or Pinterest are great ideas because the information is dynamic and constantly changing. What appears on the 1st or 2nd page of your Twitter feed will update over time and so the Ajax speeds are very noticeable in comparison. Nobody wants to be clicking “next page” to load the next set of tweets.

Whitespace & Minimalism

The terms minimalism and whitespace are thrown around a lot. And while it is true that these trends have been part of web design for years, it’s also true they have evolved to fit this newer spectrum of creativity. There are plenty of websites using whitespace as a design tool which forces users to focus deeper on the main content. But even very dense websites can utilize whitespace in smaller areas to alleviate room.

leaftlet iphone ios app design interface ui

Another big misconception is that all white space should be white in the design. However dark layouts still use whitespace and it is easier to consider this term as “empty space” on the page. These are places where you leave some room to breathe without excess clutter. Often this will represent larger elements on the page, such as buttons or icons or screenshots. Design portfolios may fill in large oversized typography leaving gaps for white space between headings and paragraphs. This makes the content much easier to digest and readers are less likely to flee at a first glance.

iphone mobile app landing page website layout whitespace

Natural Design Elements

The CSS3 specifications have brought about so many changes. Importing typography through @font-face and keyframe animations are just a couple of topics to demonstrate the more advanced features. But even basic CSS3 properties have been influencing the use of natural designs within layouts.

These elements may include rounded corners, box shadows, or background gradients with a flexible container. All of these styles would have required images 5-10 years back. Nowadays you may design a mockup completely in-browser using only CSS3 to generate these effects. 2013 will be another year forward where images built into the layout are being replaced by standards-compliant CSS properties.

dabblet website interface layout css3 coding gradient background

I have always loved the Dabblet website for its incredibly basic use of background gradients on each new page. This webapp ties into the Github Gist framework and allows developers to build small HTML/CSS prototypes in real-time. The entire interface is based off CSS3 properties and you may quickly notice how far trends have advanced in just a few years’ time.

Big Photography

We have previously written about big photo backgrounds and this trend has not been slowing down. In fact, I have seen even more websites and portfolios launching under this design style. Website layouts can be attuned for a very specific feeling or emotion based on the colors and background style. Large photographs are one other method to push for a very specific emotion.

I would argue this trend is certainly not for everybody. However in the right situation where you have enough space on the page, this large background offers a pleasing aesthetic for the visitor. The biggest problem is fitting content into the layout where it is still clearly readable. This is why the best solutions for big background photos often include landing pages or firms/agencies.

great discontent website interface ui layout design

This unique style is also perfect for design portfolios and personal websites to offer a deeper connection with your visitors. People who land on your site will be curious about who you are and what you do. It is delightful to offer visitors a photograph and showcase a brief peek into who you are. Big photographs can also be used for displaying your creative work – such as illustrations, vectors, or even your own photos.

Cleaner Source Code

The release of more CSS frameworks have allowed web developers to chop down their coding times dramatically. This means you can build an entire 2-column or 3-column website layout within a matter of minutes, when using the right tools. It also means there is less HTML markup necessary to achieve the same results.

Building websites on clean source code means everything is more streamlined, and often much smaller. This is good because smaller file sizes mean quicker loading times from the server. Plus when going back into the layout for editing these can be swift and concise without difficulty. I have learned a lot about clean HTML/CSS just by reading articles online and studying the words of other talented developers.

html5 css3 coding webpage open source

The two most important resources I would have to recommend are Github and Stack Overflow. The former has a lot of free source code you can download and implement into website projects. The latter is a very helpful Q&A community of developers looking for nothing more than to help each other. These 2 websites should offer plenty of good material to start building clean, readable source code in your websites.

Final Thoughts

Over the rest of this year we will surely unearth some new schemas and mindsets related to web design. The community has grown into a global community with designers to be found all over the planet. This means we all have access to share and research off each other’s information, regardless of skill level. There has truly never been a better era to enter the field of web design.

I do hope some of the trends I’ve listed above may offer a conjecture into new designs for 2013. It is likely impossible to nail down every single new idea as it spreads over the community. The best way to keep yourself involved is to be proactive with new trends. Read new blog posts and tutorials to stay involved with the latest web standards. Additionally if you have any ideas or suggestions we would love to check them out in the post discussion area below.

Referensi: Jake Rocheleau/

Leave A Reply