{"id":123201,"date":"2018-03-18T07:15:29","date_gmt":"2018-03-18T07:15:29","guid":{"rendered":"https:\/\/kaleidaweb.com\/2026\/?p=123201"},"modified":"2026-02-17T20:04:19","modified_gmt":"2026-02-18T01:04:19","slug":"ten-web-design-trends-for-2018","status":"publish","type":"post","link":"https:\/\/kaleidaweb.com\/2026\/ten-web-design-trends-for-2018\/","title":{"rendered":"Ten Web Design Trends"},"content":{"rendered":"
\n
\n

1. Fluid shapes<\/h1>\n

Social media behemoth Twitter surprised users when they introduced circular user photos, but this signalled the start of a trend. Web design has always been rather \u201cboxy\u201d, focusing on lines, hard edges, polygons, and rectangles\u2013 or at least, this was the case until now. The preference for fluid shapes and circles is already beginning to develop, so expect to see this continue through the new year as website design trends towards being pleasant to look at, smooth, and flowing freely. This is in direct contrast to the \u201cboxed in\u201d feel of the past few years\u2019 design trends, and should seem more natural to mobile browsing, which takes place on devices with rounded corners.<\/span><\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

Payment Provider \u2013 Landing Page by Flo Steinle<\/a><\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
\n
\n

Product Features Landing Page by Charles Haggas<\/a><\/p>\n

\"\"<\/p>\n<\/div>\n<\/div>\n

\n
\n

Design Agency Homepage Concept by Suke Tran<\/a><\/p>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n

<\/h1>\n

2. An explosion of color<\/h1>\n

For years now, color has been seen as the antithesis of good web design; colorful websites were seen as a throwback to the 90s, when we were all just getting used to hex codes and thus chose the biggest and boldest looks. \u2018Muted\u2019 has been the color theme of choice for the past few years, but websites are now beginning to blend into one another, losing their distinctive edge; this is set to be the year when color begins to creep into design once more.<\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

Skyscanner Homepage by Emma Houghton<\/a><\/p>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

BeSuperfly website<\/a><\/p>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n

<\/h1>\n

3. Illustrations and SVG images<\/h1>\n

A standard stock photo isn\u2019t going to continue to cut it last year; the trends are leaning towards images that are custom-made and resize perfectly across platforms. It seems that this year may be the year of distinctive design and abandoning general trends, with more and more designs seeking to be unique rather than conforming to an unofficial set of web design rules. Illustrations have a huge role to play in this, helping to solidify a site\u2019s identity and promote its individual merits.<\/p>\n

\"\"<\/p>\n<\/div>\n<\/div>\n

\n
Firewatch PS Game Website<\/a><\/div>\n
<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
<\/div>\n
\"\"<\/div>\n
Education\/Chess Program Homepage Design by Sandra Eftimie<\/a><\/div>\n
<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
\"\"<\/div>\n<\/div>\n
\n
\n

Landing Page Design by Pascal G\u00e4rtner<\/a><\/p>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n

<\/h1>\n

4. Large typography<\/h1>\n

A huge number of sites switched to small, unobstructive logos and typography several years ago, but the general trend is now beginning to reverse. In an effort to counteract high bounce rates, typography is getting bigger and bolder than ever before. The need to capture the attention of viewers is ever-present, and large typography should be one of the best tools to help achieve this.<\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

Financity \u2013 Business\/Financial WordPress Theme<\/a><\/p>\n

 <\/p>\n

\"\"\u00a0Visual Language 5: Travel by Surja Sen Das Raj<\/a><\/p>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
\n
<\/div>\n

<\/h1>\n

5. Broken layouts<\/h1>\n

Websites have been much the same since the internet first came into existence; a single page which you scroll down to read, usually arranged on a grid system. However, this year could be the year when broken layouts begin to really make their mark. Following last year success of half-and-half screens, asymmetrical grids and split layouts could make their mark.<\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

The New York Interaction by Hesham Mohamed<\/a><\/p>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n

6. Subtle animations<\/h1>\n

Animations have always been useful for grabbing the attention of a reader, but they also have a tendency to annoy the reader. No one wants to have to sit and watch for a page to load an animation that they\u2019re not going to use, after all. Last year's design trends will seek to fix this problem, moving into a realm of subtle animations that don\u2019t compromise the overall performance of the website.<\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

Add & Remove by Ricky Boyce<\/a><\/p>\n

 <\/p>\n

\"\"<\/p>\n<\/div>\n<\/div>\n

\n
\n

Newsletter Subscription by Vinoth<\/a><\/p>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n

7. Inventive typography<\/h1>\n

It\u2019s not just the size of typography that\u2019s going to change; a style shift is beginning to emerge, too. For years, major websites have focused on the same small set of fonts, but typography is now beginning to embrace its artistic possibilities. This will continue into the new year, taking advantage of improved screen resolution allowing custom fonts to become as readable as their standardized equivalents. More sites will embrace the possibility of their own fonts, helping to distinguish themselves from their competitors and craft a unique identity right across their site.<\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

Travel Guide by Marko Cvijetic<\/a><\/p>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

The7 \u2014 Multi-Purpose Website Building Toolkit for WordPress<\/a><\/p>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n

8. Dynamic gradients<\/h1>\n

\u2018Flat\u2019 background colors \u2014 background colors that are a single color \u2014 have been the norm for many years now. Gradient backgrounds are often associated with older websites that haven\u2019t moved on, but this may be the year when gradients make their comeback. The reason for this is simple; screens are better now, resolutions are better now, and colors appear vividly across all devices. This means that gradients can be more subtle and elegant, rather than striking \u201cwhite into green\u201d gradients that were all the rage in the first decade of the 2000s. Dynamic gradients also allow images to \u201cpop\u201d more, helping to keep the interest of ever-wandering web viewers, so they look certain to make an appearance next year.<\/p>\n<\/div>\n<\/div>\n

\n
<\/div>\n<\/div>\n
\n
\n

\"\"<\/p>\n

Apperle \u2013 App Landing Page<\/a><\/p>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

Delicious App Landing Theme by Digital Science<\/a><\/p>\n<\/div>\n<\/div>\n

\n
\n
<\/div>\n

9. Mobile first<\/h1>\n

It\u2019s fair to say that the web design industry took a long, long time to adapt to mobile web browsing. Websites were designed to be viewed on PCs and laptops, so site design was sprawled, text size was small, and navigation was often intricate and layered. Eventually, the trends changed, and websites were adapted to be responsive to mobile devices. However, this year may see a real change in attitudes; no longer will websites be adapted for mobile viewing, they will be created for mobile viewing and adapted to suit PCs and laptops.<\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n
Mobile Animations & Interactions by Yalantis Mobile<\/a><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
\n
<\/div>\n

<\/h1>\n

10. Drop shadows and extra depth<\/h1>\n

In another nod to the smaller screens of mobile browsing, drop shadows and depth in graphic and overall design are going to make a comeback. Drop shadows may feel very 1990s, but they offer a depth and a sense of texture that makes the mobile viewing experience all the more enjoyable. These design quirks will also be look fantastic on modern PC and laptop screens, taking advantage of their higher resolution to produce more complete images.<\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

Pipeline by Sinan Ozdemir<\/a><\/p>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\"\"<\/div>\n<\/div>\n
\n
\n

Mydiicare -Healthcare Providers by Kukuh Andik<\/a><\/p>\n

more on Desket<\/a><\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Social media behemoth Twitter surprised users when they introduced circular user photos, but this signaled the start of a trend. Web design has always been rather \u201cboxy\u201d, focusing on lines, hard edges, polygons, and rectangles\u2013or at least, until now. The preference for fluid shapes and circles is already beginning to develop, so expect to see this continue through the new year as website design trends towards being pleasant to look at, smooth, and flowing freely.<\/p>\n","protected":false},"author":8,"featured_media":207746,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[14,16],"tags":[220,126,221,31,32],"dipi_cpt_category":[],"class_list":{"0":"post-123201","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-webdev","8":"category-blog","9":"tag-220","10":"tag-color","11":"tag-layers","12":"tag-trends","13":"tag-web-design"},"_links":{"self":[{"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/posts\/123201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/comments?post=123201"}],"version-history":[{"count":8,"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/posts\/123201\/revisions"}],"predecessor-version":[{"id":27746075,"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/posts\/123201\/revisions\/27746075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/media\/207746"}],"wp:attachment":[{"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/media?parent=123201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/categories?post=123201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/tags?post=123201"},{"taxonomy":"dipi_cpt_category","embeddable":true,"href":"https:\/\/kaleidaweb.com\/2026\/wp-json\/wp\/v2\/dipi_cpt_category?post=123201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}