Welcome to the Plainsail Solutions – Blog
Welcome to the Plainsail Solutions – Blog
Design can make or break web and mobile start-ups these days. But the problem is: It’s not always clear how to improve the design of web sites, mobile apps and connected devices. Is it just about making them cleaner, more streamlined, and less cluttered?
We talked with some of our favorite tech designers and came up with a list of five key trends. Yes, all of them could fall under the broad heading of “simplicity,” but making a site less busy does, after all, help highlight what’s important.
I’m purposely not calling these flat. As designer Henri Liriani explains on Medium, the term “flat” suggests that they are somehow simple or easy. But as any of us who has had to cut down our precious prose knows, restraint is hard and elegance doesn’t come easy. Whether designers like it or not, iOS7′s design will force them to also create cleaner icons, lest their skeumorphic creations look like tacky dinosaurs in Apple’s clean interface. Expect more minimalist icons that are easily recognizable across platforms and across the color wheel.
Speaking of the color wheel, unless you want your app to be invisible, it must be rendered in color. If you’re like many people, your app dock these days is probably a sea of blue. Apple’s new design is a boon for color theorists. It flouts conformity by dramatically increasing the range of acceptable hues, including some at-first jarring pastels. While traditional app colors like blue suggest reliability, they also infer the status quo. Using bright colors can provide a visual indication that something new is in the works. I’m not advocating Yahoo purple—but at least it had people talking. Fuchsia, anyone?
More and more, designers will use toolkits like D3.js (see pictured above for some of the options it offers) to bring data directly into their web design. Instead of creating data visualizations in other software and uploading them onto a website, data-driven elements are part of the web page from the start. The result: interactive data visualizations that are also crawlable, meaning they can be found through a search engine. Tools like this continue the trend of making data part of the design process, not an afterthought.
Web fonts used to mean a handful of glorified print fonts that were simply digitized for the screen. That meant many of the design elements that made text beautiful in print failed to shine in pixels. Now, font foundries like Hoefler & Frere-Jones and Adobe (sample above) are creating in-browser web fonts that are built for any and all screens. The proliferation of web-safe fonts presents all kinds of new possibilities for making fonts look as attractive as the content it’s expressing. Keep an eye out for more expressive fonts and larger font sizes.
Parallax scrolling—a trick used in animation when background images move more slowly than the foreground text—is tricky. If it’s not done right, your website becomes dizzying—no better than a PowerPoint with race-car sounds for transitions. But done well — like in the New York Times’ ”Snowfall” or The Verge’s arcade piece—it creates an immersive experience, and punctuates a story with necessary breaks, transitions and visual cues. As with everything tech, less is more. So while parallax scrolling is helpful and in vogue, don’t go nuts with it.
Apps are ascendent, but websites are far from obsolete. In fact, there’s virtually no end to the need for increasingly sophisticated web presences. Fortune 500 or corner lemonade stand, you’ve got a site, and odds are it could be better.
Odds are, also, that it runs on WordPress. Half of the world’s top million sites (including Forbes.com) do. But many designers, myself included, have a love-hate relationship with WordPress. On the back-end, as a place that a writer or editor can manage content, it’s amazing. This is why they call it content management. It works great out of the box and you can customize the interface for your editorial clients quite easily through the use of plugins or (if you are ambitious) with your own code.
And since most people who produce web content know how to use WordPress (because so many sites already use it) it’s a natural choice when you are setting a site up for a not-technical person to use. But the presentation of that content on an increasing number of screens has been less of a slam dunk for WordPress.
WordPress, like virtually all content management systems, relies of “themes” to determine the fonts, colors and layout of a website. The wonderful thing about themes in WordPress is that if you set things up in a standard manner (i.e. a blog) you can effortlessly change themes and transform the look of your site. But in a world of increasingly sophisticated web sites and full-fledged web apps, that turns out to be a big “if.”
Once you are in non-standard territory, you either have to find a theme that is doing almost exactly what you want to do, do an extreme customization on an existing theme or (more efficiently, perhaps) build it from scratch. Very quickly, terra firma is gone and the wonderful content management advantages of WordPress begin to seem questionable.
WordPress, and many other forms of software for the web, relies on convention over configuration to really be effortless. If you are setting up a blog or some kind of well-established type of site, there will be ready-made themes available, and not to difficult to find, that can enable you to get a good-looking site up quickly. But once you begin to diverge from convention in a meaningful way, you are confronted with the WordPress conundrum. Building a WordPress site entirely from scratch, to a person who knows what they are doing, may make technical sense. By starting clean you can minimize the amount of code that the site uses and the conflicts that can arise with other people’s code. On the other hand, if you are the person paying for that developer’s time and having to budget for every feature you want included, the process can quickly become time-consuming and expensive. Exactly the opposite of what people sign on for with WordPress.
One thing that is lost when you ditch pre-built themes is all of the design and user interface craft that goes into a well-built theme. Whether you build a theme from scratch or use some kind of simplified WISIWYG theme builder for WordPress, you are not assured of having top-rate contemporary design—unless you’ve hired (or happen to be) a top-rate contemporary designer. Again, more than you bargained with when choosing WordPress.
On the other end of the spectrum, you can try to find a theme that does most of what you need and customize the rest. The advantage here should be that you preserve all of the design and interaction goodness in your chosen theme. In actual practices, though, the demos of themes and what they look like as a raw install can be strikingly different. As Andrew Powers, founder and CEO of the PageLines front-end framework for WordPress, writes in a post about the problem with themes, “most people don’t have the skills or time needed to do something as simple as recreate the demo.” He offers the examples below of the disjunction between the demos of some popular premium (i.e. paid) themes and what your initial install might look like.
Powers is not just musing on this problem. PageLines’ new product, DMS (for Design Management System) is an attempt at solving them. DMS is installed in WordPress just like any theme, but that’s where the resemblance to a standard WordPress theme ends. Instead of specifying what your finished website will look like, DMS creates an interface for building your site with drag-and-drop components right on top of your live site. In effect, DMS transforms the design and construction of a WordPress site from a back-end process to a front-end experience. This immediate visual feedback cuts a tremendous amount of time out of the site development cycle and the modularity takes a lot of the guesswork out of how the details of your design are specified.
For those unfamiliar with how websites are built, there are two basic categories, static and dynamic. A basic business card or brochure-ware website consists of one or more pages that are not intended to change often. The work of these sites is the creation of the content and crafting the visual presentation. The “code” aspect of static sites is often quite minimal, perhaps limited to animated visual effects or layout variations based on screen size. But people discovered a problem with static sites—Google didn’t love them. Search engines want your site’s content to be highly specific, yes, but also frequently updated.
Even better than updating your static text, from a search perspective, is to add whole new pages, optimally with content of even greater specificity. So the solution to the Google problem, for many websites, became adding a blog. And here is where static sites took a turn towards the dynamic. If you are a web designer or a developer, it is not an efficient use of your time (or of your client’s money) to build a new page for every blog post. And most blog posts need to have a fairly standard set of elements, like post dates or bylines, and should look like the website their are attached to.
Long story short, MovableType, WordPress, Blogger and a raft of other purpose-built blogging platforms arose and their progeny are now used by the majority of the world’s websites, many of which don’t even have a “blog” component. I’m skipping over vast swaths of web history here, but the virtue of these platforms is that they are the easiest way to build and maintain a dynamic, template driven website. And as the tools have progressed, more people can do more while knowing less. This is, in general terms, a very good thing.
As any developer will tell you, though, there is a lot of complexity behind the scenes involved in making something user-friendly. WordPress is a case in point. In order to create a system where themes and bits of functionality (called plugins) can be swapped in and out at will through the admin interface, WordPress itself (and the developers that code for it) needs to manage an ungodly pile of files. Typically, there are multiple places to look when you need to change some little configuration or setting. And anything you change in the code, or any plugin you add, can have unintended consequences downstream on some other attribute or plugin. And you don’t always see the effects immediately.
The graphic below shows how Powers has positioned his DMS product in the WordPress design space. Hand coding is the slowest and most difficult option, and requires the intervention of a designer as well as a coder (not often the same person!) Using a pre-built theme is fast, but customization can be difficult. WYSIWYG site builders are built for customization, but time-consuming to achieve professional results. DMS aims to be both fast and easy to customize. PageLines is built on top of Twitter’s Bootstrap framework, so everything looks clean and modern right out of the box. Plus, most web designers are familiar with Bootstrap at this point and know how to quickly use and build on its class names to style page elements.
It’s important to make clear, however, that you still need to know what you are doing to take advantage of the framework’s power. If you are confused about how websites are built, or how WordPress works, DMS may not be for you. But given a grasp of the fundamentals, even an enterprising non-designer will surprise themselves with how much they can do—and how quickly—once they are up and running with DMS.
One of the things that distinguishes DMS from some of its competitors, like Squarespace (which also offers a great visual interface and well-crafted components, as well), is that DMS is built on top of WordPress. This means that in addition to the components built-in to DMS, and the plugins, sections and DMS child themes available (for a fee) from the PageLines store (52 at present) you also have the entire selection of 26,567 WordPress plugins to work with, many of them free.
The function of a premium framework and a paid store amidst the free-for-all that is WordPress is itself an interesting story. Like many open-source projects, WordPress has grown and thrived on the basis of the unpaid contributions of legions of developers. Many have used their demonstration of expertise in the free plugin market to drive business to their paid consultancies. Others have built additional functionality on top of their free plugins to create premium versions. As in the world of free apps, this can seem annoying and manipulative—the free app (or plugin) as gateway drug.
But after using DMS, my perspective on this has changed somewhat. Instead of avoiding paid plugins on DMS and WordPress, I found myself doing a cost/benefit analysis of how much time a given plugin or DMS section would save me and often concluded that the prices were very reasonable. In this way, a paid framework like DMS makes you realize that you are indirectly hiring developers to help you with your projects. For those familiar with Jaron Lanier’s recent book, Who Owns the Future?, this is a very Lanier-esque concept.
The way the PageLines store is integrated right into the DMS interface is really helpful, but only if what is on offer is genuinely useful. In the case of the DMS components, they need to not only be functional and attractive right out of the box, but also generalized and reusable in many different contexts. I asked CEO Powers how tightly they will be controlling what goes in the store. “Running a marketplace comes down to economics,” he responded. “What we do is review extensions for basic quality and functionality, and then let them play the game. We’ve designed the store to be a meritocracy, where the best extensions win.”
The developers themselves have to make a lot of decisions about satisfying their customers. Most expert WordPress users expect plugins to be editable and forkable, since it is an open-source platform. All of the DMS components are addressable in the front-end site view mode, but some offer control through the back-end dashboard as well. And Powers tells me that, “Most developers (all so far) have opted to license their products in a way that allows users to use them on as many sites as the user wants.”
Has there been pushback to the pricing model from users? “Yes!,” Powers affirms. “The expectations of the market that everything should be free, regardless of quality or support, have been a challenge for us.” In the end, though, designers and developers are pragmatic. If something is going to save them time and help them do a better job for their clients, they will pay for it.
I talked to Evan Mattson, one of the developers who has contributed substantially to the PageLines store, about his perspective on building for the platform. “DMS is doing for web design what iTunes did for music by bringing the marketplace right into the hands of the user. Built-in extensibility means significantly less time finding and implementing what you’re looking for, which adds up to a much better experience for the user.” To Mattson, “Developer… is just a fancy name for the first user. I’m also interested in things that save me time and energy, so [the store is] really a win-win.”
PageLines is attempting to name something and also be the first working example. Will “DMS” become a well-used a term as “CMS”? Either way, PageLines DMS is making a case for being the fastest way to build high-quality, production-ready websites. The future will tell if others follow suit.