Core77

Templates Are Dead: 5 Ways Scalable Design Will Change The Way We Build Websites

By Leigh Taylor - May 4, 2015

in UX

Websites, like works of art, are best at their most original form. But as templates continue to dominate the space, designers are left to wonder: how can we work to stop promoting the uniformity and unoriginality of templates?

Scalable design enables you to create for multiple screens from the get-go.

Scalable design offers a more open and collaborative process where designers no longer have to work in obscurity and can instead work alongside other team members to ensure that a website meets design expectations. In time, scalable design will change the way we build websites. Here's how:

Here are five ways scalable design will change the way we build websites.

1. A more personalized web

A profound shift is happening on the Web. From a focus on popularity and immediacy to a focus on relevance and personalization, people bring an infinite amount of ideas, motivations, and behaviors to their Internet experiences. Not only are these changing faster than ever before, but they are also evolving into areas that cannot be predicted. As a result, companies are shaping their offerings to be more relevant to their customers, but they are often building them on aging platforms that do not make personalization scalable.

In the early days of the Web, technology limited the amount of personalization that was possible. Templates are built for the masses, which means they cannot cater to every need of every customer and become dated quickly. Today, those limitations are peeling away. Design system solutions make it possible to deliver individualized experiences to everyone at scale. This individuality requires a whole new approach that does not involve cramming content into containers, but rather understanding the purpose and intention of the content and shaping the design around that. It requires letting algorithms produce the variations and letting the humans direct the art in order to reflect the unbelievable diversity of the Internet.

2. Minimum input, maximum output

A website is the vehicle that people, like small business owners or artisans, use to communicate and execute their vision, product, or service. But the production of a website is just the beginning of the process, and must continue to reflect the evolving needs of both its creator and its users. While templates require industry-specific knowledge to adapt to each person's needs, scalable designs are already 80% of the way there.

Scalable design breaks up constituent parts to make the design process more accessible.

Scalable design breaks down and compartmentalizes the fundamentals of a traditional template into its core elements. These distinct components can be developed in isolation and reintroduced into the master design system with minimum disruption to the overall project. For example, a design system's typography can be extracted for refinement, exploration, and improvement. Once the new system is completed, it can be introduced back to the master design system without the need to incrementally update hundreds, if not thousands, of mockups, prototypes, or pages. Core changes ripple through the entire site to make it more purposeful, consistent and effective. Furthermore, this compartmentalized approach enables scalable design to deliver varied results for typography, layout, color, and other components to better fit the the dynamic needs of each customer. Compartmentalization turns small contributions into large-scale, impactful improvements.

3. Remove the barriers of entry

Templates have made web design more accessible to people with no web design experience by removing many barriers to entry. Now, scalable design represents the next step in that evolution by forging a closer synergy between formerly segmented design and development teams. Removing the old chain-of-command approach allows all team members to contribute, encouraging greater collaboration at every level. The result is that production teams are able to operate with less uncertainty and fewer distractions to minimize unnecessary iterating.

This, in turn, allows customers, clients, and stakeholders to focus on what is important to them rather than operate under the arbitrary limitations of old templates that force them into certain alignments or content. This increases satisfaction at all levels.

Extracting core design fundamentals also focuses on the right elements within the right contexts to improve every possible content narrative. Design systems marry the two, which also means that feedback and progress is more focused, more efficient and effective. It allows for better art direction that will result in better, higher-quality results while removing steep learning curves in design or code. This brings us closer to design as a solution, rather than a hindrance.

Enter a caption (optional)

Scalable design lets websites evolve with content changes.

4. Evolving solutions

Templates are static. They do not grow or evolve with their owners or adapt to content. Changes are almost impossible to make without a massive investment of time and money. Scalable design provides a layer of abstraction that creates a safety net from static solutions. The core fundamentals can be repurposed, reimagined, and redelivered independently from today's "best practices" and then introduced again as more refined and relevant elements that create a more up-to-date, flexible website.

In addition, due to scalable design's compartmentalization of design elements, the opportunity to evolve is constant. For example, elegant solutions for animation rules within a website can easily be shared, forked, and refined through a master scalable design portfolio. This approach not only meets the needs of any one anticipated audience, but also for those audiences not yet anticipated.

5. Not just for the select few

At it's heart, scalable design is an invitation for more people to get involved and make meaningful contributions no matter their technical aptitude. It allows people who were once hindered by the "what" and "how" of design to shape the "why" by promoting individual contributions on their merit and strength. As a vehicle for communication that provides clarity and focus to the work from the people who make the biggest impact. They translate process, production, and intention into an understandable, accessible format.

Furthermore, scalable design eliminates silos that exist in vision, design, art, and craft. It removes inefficient segmentation of the production process, facilitating worthwhile collaboration that benefits entire projects and teams. Accessible scalable design opens the door for anyone to create smart, adaptive and powerful websites, no matter how advanced or rudimentary their understanding of technical languages or design principals. Now every team member can contribute to the design process, making the final product even better.

What are your thoughts? What experience have you had with scalable design? Please share in the comments.

o
3

Favorite This
Q
26

Comment

Comments

Matt Clark

9 years ago

Z

2Z

Reply

Maybe it's just me being spectacularly thick ... but I end this article with one question: "How?". Most of the statements made sound interesting in concept, but unless I'm missing something really obvious, there's little or no substance on how "scaleable design" changes the practicalities of making content appear on the web. Algorithms shaping design based on content - fine (and The Grid is an exciting new idea that I look forward to seeing more on). But above and beyond that technology solution ... what are the nuts and bolts of how this is supposed to alter our present way of acting? Each of the five elements of this article are splendid Manifesto-style statements, but ... how?

Random ecample:

"At it's heart, scalable design is an invitation for more people to get involved and make meaningful contributions no matter their technical aptitude. It allows people who were once hindered by the "what" and "how" of design to shape the "why" by promoting individual contributions on their merit and strength. As a vehicle for communication that provides clarity and focus to the work from the people who make the biggest impact. They translate process, production, and intention into an understandable, accessible format." .... how?

Am I being hindered by the how?

!Report as spam
- Tobias Geisler
  
  Matt Clark
  
  9 years ago
  
  Z
  
  Z
  
  Reply
  
  I completely agree: HOW?
  
  !Report as spam
  - Thang TD
    
    Tobias Geisler
    
    9 years ago
    
    Z
    
    Z
    
    I agree, I invest about 1 hour, then they ask for money, whereas no way how to use their stuffs. Crazy.
    
    !Report as spam
Mike London

9 years ago

Z

1Z

Reply

As a UX / Creative I'm excited to see if this takes off, and will it disrupt the current workflow enough for us designers to adapt to the next level?

!Report as spam
matt magana

9 years ago

Z

1Z

Reply

i've been around long enough to see the changes in web design. the biggest problem i see are the labels we use. it all falls apart after that.

i'll be honest, until visual design is given equal billing to that of developer (web developer, engineer, or whatever you want to call someone whose main method to site building a via code), design will always have the look of templates — especially with the advent of html5/css3 and responsive design. there is no substitute for a visual design background and simply calling oneself doesn't make it so (the ux designer moniker comes to mind). "the grid" feels like another type of website building tool like wix, webydo, moboom, and square. what stands out to me in the grid video is that it still looks template-ized. not the one's i've typically seen, but still has that "clinical" look that like it was "designed" on a computer. for example, why so much white space? there appears to be no consideration for relationships of size & proximity of elements to each other.

if someone could create an app (that's not rent ware) that is completely drag & drop and, even further customizable they would really have a game changer. macaw is currently working on something that remotely comes close to this and i can't wait.

!Report as spam
- Brandon Bridges
  
  matt magana
  
  8 years ago
  
  Z
  
  Z
  
  Reply
  
  Considering it's still in beta, I say it looks pretty sharp. Bring on the buzzsaw!
  
  !Report as spam
- Allan White
  
  matt magana
  
  9 years ago
  
  Z
  
  1Z
  
  Reply
  
  I think that the ultimate goal of AI design systems is nothing less than replicating the thought processes of human designers. Which, as a designer, I'm keenly interested in! Imagine creating a design system so elegant and smart, that I don't have to lay out everything for clients... Oh? You don't need me any more? What?
  
  !Report as spam
Jorge Bermúdez

9 years ago

Z

1Z

Reply

The rule. Is broken

!Report as spam
Miranda Right

8 years ago

Z

Z

Reply

What a useful stuff! I'm a beginner web desinger. To create websites, I download designer-made templates from http://www.templatemonster.com/wordpress-themes.php website and optimize them according to my clients' needs. The most interesting thing about web design is that there are lots of ways to approach a problem: you can build a website from the scratch or use a template.

!Report as spam
Indigo Ohmnill

8 years ago

Z

Z

Reply

i need some info Dan Tocchini is my cousin i am Teddy tocchini an am looking to talk to someone i cant get a hold of him.. i am seriously eager to talk

!Report as spam
8 years ago

Z

Z

Reply

testing to see how this comment on a specific paragraph thing works. please disregard

!Report as spam
Brandon Bridges

8 years ago

Z

Z

Reply

The only comment that I have is, "Hey Leigh, nice declarative statement of purpose! Cheers from Texas." -B#8285

!Report as spam
Cengiz Ozelsel

8 years ago

Z

Z

Reply

With all respect, this is the highest evolution of academic B.S. I have come across in a while. It's abundantly clear that the author of this article is helplessly lost.

Let us try to refocus on the basics: Why do we need a website in the first place? It is the cornerstone of effective online marketing and a means to an end. Unless you're running an e-commerce business, a website is a marketing tool FIRST, and sales tool SECOND. The content we put on the site allows us to build the LIKE, TRUST, and WANT, but above all it needs to support our primary goal of getting the attention of our target client first (marketing!). And to be even more clear, unless a site is "find-able," it's just an expensive digital business card.

"Find-able," in turn, means that the owner of the site needs a simple and clean infrastructure for content marketing, including the ability to optimize landing pages and posts for the exact keywords [for the products and services] that her qualified avatar client is searching for in Google.

And once we have a site that makes content marketing a joy for the owner of the site ... AND gets the website found by our ideal clients, we need to make sure that the visitor actually enters the site (think of a customer walking into a brick-and-mortar retail store based on an attractive store front), engages, and contacts us by phone or through the contact form.

The other important goal of a great website is to get visitors to share our favorite content with the world using social share buttons and email (free marketing). Note that I write SHARE and not LIKE. I am not a fan of social LIKE buttons for most pages of the site since they tend to be a greater distraction and potential hole in the marketing funnel towards our contact page.

Next, the site needs to be designed and developed with mobile FIRST in mind since an estimated 74% of our potential clients are using mobile and tablet to identify, learn about, and act on the products and services we offer. Google loves speed and efficient websites, which means we need to take a BIG FAT RED marker and eliminate distractions that affect our website performance. Just because technology affords us the ability to do something does not mean we should. Again, it starts with an understanding of our target client, for whom the site is built (not for us!).

And it almost goes without saying that any design layouts need to be created with the mobile user, her experience, and march towards the contact page in mind. And that the site renders brilliantly across any browser and mobile device.

Now, I share some of the [admittedly not necessarily novel] ideas the GRID aspires to (such as simplicity, aesthetics, automation, saving time, avoiding mistakes, etc.). However, an algorithm cannot make up for good ol' fashioned bottom-up individual knowledge of our target customer and her needs. That is where a GRID (even once reality meets expectations) or a template will never compete with an integrated objective-based approach to designing and developing websites.

However, such an integrated objective-based approach takes a lot of time and money, and above all the user of the website still needs to UNDERSTAND her target client. You can have the greatest design and developer combo, but unless the objectives are clearly understood and articulated, the website will fall short of expectations. And spending 3-6 months designing and developing a new site means you necessarily need to take your eye off your business, and the distraction can cost you a fortune (and loss of market share).

Instead, the single best solution I know of is to bring together 3 elements: a world-class designer, an efficiency grand-master developer, AND a successful functional expert in the niche industry a site is developed for. The latter will draw on extensive field experience to lay out what a target client requires and how she prefers to consume her information. That experienced-based vision will then be married with a design aimed to achieve those objectives. And finally, the developer will work the magic and bring said objective based vision to life.

The benefit? Once created, the end product will bring together the benefits of a template (ease of use, quick, stress tested across browsers and mobile devices, etc.) but in a design that at its base speaks to the target client in a niche. And then the individual user can spend a few days populating said smart template with content aimed at content marketing, adjust the colors and typography, etc. Best of all, even though such a product is expensive and time-consuming to develop properly, ... once done, it will not be priced much higher than many of the widely available premium templates and wildly outperform them.

And Voila, the perfect solution that trumps the GRID and conventional templates.

Hope that was not too long-winded, but I just get tired by the academic consulting oriented thinking.

!Report as spam
- Dmitri Zaitsev
  
  Cengiz Ozelsel
  
  8 years ago
  
  Z
  
  Z
  
  Reply
  
  I completely agree with how this comment started on marketing objectives of the site. However, the further it goes, the more I have to disagree. Having great designer, developer and marketer certainly sounds great in theory, but in practice they still rely on tools and technology and some of the very reason why they are great are due to their knowledge of those technologies.
  
  And the Grid is trying to bring new technologies to make those tasks simpler, faster and more efficient. If I understand correctly.
  
  But what I miss are concrete and simple example demonstrating the use of those technologies. Are they anywhere to find?
  
  !Report as spam
- Brandon Bridges
  
  Cengiz Ozelsel
  
  8 years ago
  
  Z
  
  Z
  
  Reply
  
  I see the Grid more as a publisher of content, eloquently featured. To me, this is currently a product for artists of all sorts (writers, musicians, painters, etc.). It is a way for these creatives to express their selves and not worry to much about the aesthetic, albeit ironic.
  
  !Report as spam
Nonlinearmind .

9 years ago

Z

Z

Reply

"In the early days of the Web, technology limited the amount of personalization that was possible."

This was written by someone apparently too young remember the early days of the web. The early web was ALL about personalization. There were no templates, and no site builders online. The design language of the web hadn't yet been solidified and corporations hadn't taken it over yet. Every month new versions of Netscape came out with new features like frames and JavaScript, and companies began making plugins like Shockwave, that allowed individuals to experiment and truly build unique and personalized sites. It was an amazing time and no product can ever bring that level of personalization back to the web.

!Report as spam
- Brandon Bridges
  
  Nonlinearmind .
  
  8 years ago
  
  Z
  
  Z
  
  Reply
  
  Think..."...intuitive exponential..."...because...
  "The Singularity is Near" - Kurzweil
  
  !Report as spam
andrew j talcott

9 years ago

Z

Z

Reply

Templates are dead, long live templates.
What is being described in the article is a set number of layouts, colors, typography that are predefined aka: templates. What is not being described is the uniqueness of business needs across the board, if I am a realtor, how do I add my automated listings? If I am a dentist: are my forms HIPPA complient? Who makes those forms?
No answers, just concepts, this is the marketing ploy of online businesses attempting to sell snake oil to people that do not understand the web, who do not want to deal with the web, and who have been ripped off by web designers in the past, looking for a simple solution, only to realize they have been ripped off again.
And lolz to all the comments below who mention the advertiser, I mean "author" of this "article", who has yet to answer any questions.

!Report as spam
Pierre Maciel

9 years ago

Z

Z

Reply

IF Design is Art, and IF Art is an expression of human desires and feelings, how can an AI figure out the best approach? :) think big guys.. if you want to change something, start from the top.

!Report as spam
- Brandon Bridges
  
  Pierre Maciel
  
  8 years ago
  
  Z
  
  Z
  
  Reply
  
  See: (Band) Our Lady Peace, (Album) Spiritual Machines, Circa 2k CE
  
  !Report as spam
- Allan White
  
  Pierre Maciel
  
  9 years ago
  
  Z
  
  Z
  
  Reply
  
  Art is not design and vice versa. The job of design is to communicate a message; if it fails to communicate clearly, it's not doing it's job.
  
  The task of art is self-expression. Whether the viewer understands or not can have little bearing on its validity.
  
  !Report as spam
  - Brandon Bridges
    
    Allan White
    
    8 years ago
    
    Z
    
    Z
    
    -^- see above -^-
    
    !Report as spam
Armin JR

9 years ago

Z

Z

Reply

Author Leigh Taylor sadly rather absent since those valid questions have been asked. Seems like he was simply posting an advertorial for their "The Grid" product. Annoying.

!Report as spam
- Brandon Bridges
  
  Armin JR
  
  8 years ago
  
  Z
  
  Z
  
  Reply
  
  Nayyyy... Say?
  
  !Report as spam
Abdulla Ashoor

9 years ago

Z

Z

Reply

Despite what discussed .. template is concept, and a concept never die.

!Report as spam
- Brandon Bridges
  
  Abdulla Ashoor
  
  8 years ago
  
  Z
  
  Z
  
  Reply
  
  Concepts are not legends, they are theories; and theories surely die (sometimes :D )
  
  !Report as spam