The web industry is constantly changing. Here are the trends to watch out for in 2019.
Predicting web design trends is always tricky. Get it right and you are praised for being ahead of the curve; get it wrong and you are met with a flood of I-told-you-sos. That said, with 2019 now in full force, I’m going to provide some insight into the trends that will define web design throughout this year and beyond.
We’ve seen some vast changes in the past decade: the HTML5 revolution, mobile-first app development and now native features in web apps, plus more new web design tools than you could imagine. With the increasing use of machine learning, cross-platform frameworks and a more diverse developer base building everything, there’s going to be some exciting changes in our industry. These are my continuing predictions for the biggest web design trends in 2019.
1. AI gets personal
Artificial intelligence is too hot to not bring up. While it might not be as flashy as a self-driving car, the web can certainly connect to AI. Machine learning is going to take analytics to the next level. In the past, analytics offered more of a reactive approach: log the data and then use it for your next release. 2019 and onwards should continue to be about capturing data about how your app is used and improving the user experience by driving the website to change and adapt to this by itself.
This means that, depending on the data available on a user, the application will be able to act like a chameleon and change itself to provide the ideal UX for them. This will create truly personalized sites that behave differently and show different features depending on the individual using it.
2. Voice interfaces take over
With the explosion of voice assistants such as Alexa and Siri, conversational interfaces are bound to become a natural part of an application’s fabric. As more users become accustomed to interacting with the web using their voice, developers will need to ensure they can offer a seamless experience, even in web applications. Imagine having users sit on their couch and view their social media feed or tell their favourite voice assistant to pull up and read a news article for them – all without traditional inputs.
3. Accessibility becomes a requirement
Accessibility is no longer a luxury; it should be an absolute requirement. We’re seeing this pop up more and more, and this trend will just continue next year. Some have pushed hard with Progress Kendo UI to follow common accessibility guidelines like WCAG 2.1 and WAI-ARIA, to ensure web components follow accessibility requirements out of the box.
This positive trend in accessibility focus will continue in the web. Whether this comes from development practices naturally emphasising accessibility, or governments and legislature stepping in to enforce adherence, we will have more accessible applications.
4. Web apps get an AR makeover
Augmented reality will take the web by storm in 2019. AR is already commonplace in scenarios like Snapchat filters or Pokémon Go, but its use of AR will only expand to cover not only social media and games, but also everyday applications.
The beauty of AR is that it does not require full immersion via a clunky headset, as with VR. Instead, it can be used with the phones that we walk around with in our pockets today. Why should AR be limited to just the native mobile applications on a device? Why not use it on the web? Offering AR services through your web application without needing it to be installed as a native app can have huge benefits from a UX perspective.
Imagine being in a grocery store and doing a quick web search for a recipe. AR integration could provide users with turn-by-turn navigation through their mobile device to find all the ingredients within that store – all within a web app.
5. Developers flock to the web
Frameworks such as NativeScript and React Native will also play a big part in bringing more developers to web technologies, since they provide a single codebase for web and native mobile applications.
Additionally, concepts like progressive web applications (PWAs) will continue to blur the line between native mobile apps and web. Developers will then be able to purely focus on the user experience without worrying about specific platform choices.
Web Assembly is another technology that is bringing more developers to the web. Thanks to Web Assembly, C++, C#, Rust and other programming languages can now target the web. Projects like Blazor, which leverages .NET in the web, take advantage of the promise of Web Assembly and will help open the web to even more languages. This means that in the future, all developers can be web developers, regardless of programming language.
It’s easy to become bored with the ordinary – longing for something original and one-of-a-kind. That’s why common hero areas are bursting with eccentric ideas. They are aimed to not just impress, but also satisfy a user’s craving for creativity and originality.
However, animations and grandiose solutions are not the only things that can do the trick. Going off the beaten path with even the most trivial things can achieve the same effect. And vertical lettering is vivid proof of that. Becoming quite popular these days, it has grown into a tiny trend with some aces in the hole.
We do not see much use of vertical orientation in web design. Traditionally, it is a place where horizontal rhythm rules the roost, though this doesn’t mean that everything should revolve around it. As a rule, developers stick to the traditional models. However, diversity and deviation in habitual reading flow can be beneficial. What’s more, you do not need to take extreme measures. Small doses of vertical orientation are more than enough to produce a proper impact.
Here, the creative team has twisted the basic navigation by rotating it 90 degrees and reflecting it horizontally. You should read it from bottom to top – that is quite unusual, but intriguing. As a result, the welcome screen has got a zest without all of those overwhelming centerpieces. Also, note the top header: it feels incredibly spacious, and the logotype gets the overall attention by looking prominent without much effort. That is a smart approach.
There are some other exceptional examples where vertical lettering is like icing on the cake. Consider Lydia Amaruch and her online portfolio.
Much like in the case of Archi Graphi, here the usage of vertical rhythm is episodic but well-thought-out. There is a traditional streamlined horizontal navigation, but it includes just the essentials. All the rest has been pulled to sides – literally. They echo with vertical stripes on the back, creating a harmonious aesthetic.
Yo:Ha adopts the same approach. Whereas the main navigation is hidden behind the hamburger button, links to the homepage and social media stay on the surface. Again, notice the overall theme. Here, vertical rhythm can be seen in various details, such as the slider that is broken into three semi-transparent panels and elongated symbols. Consistency marks the design of this website.
Ivan Ibanez and the team behind Gothamsiti show us how to apply vertical orientation to the entire navigation. As it turns out, it is handy to use – to say nothing about its attention-grabbing look. Note, these two examples have different themes, moods, and atmospheres. But, vertical navigation fits like a glove in both cases.
The personal portfolio of Ivan Ibanez has a boxy vibe. There are hollow blocks, split layout, ultra-thin lines and lots of white space. The vertical navigation beautifully finishes off the design.
The creatives behind Gothamsiti’s design have positioned links around the perimeter of the hero area – placing each one in a corner. In this way, nothing distracts the attention from the mysterious and creepy welcome screen. At the same time, all the gateways are exposed, making users feel comfortable.
Let’s step away from navigation and explore examples of vertical lettering that is a part of the content.
Since vertical orientation looks a bit strange to the majority of us, it can be used to put an extra emphasis on the crucial things like, for example, a tagline. The idea can be seen in Prime Park Sessions. Here the nameplate of the agency is directed leftwards, just where we usually start to read. It also mirrors the vertical navigation on the right. As a result, the design feels complete and visually-interesting.
The team behind the design of Luxury Villas uses a vertical orientation for displaying the tagline. The latter is also provided with a relatively wide background so that it looks like a sidebar. Though it is not just an ordinary sidebar, it is a sidebar with zest. That is clever.
Another way of benefiting from the trend is to use it for headings. Consider Kitamura Makura and Canatal.
When it comes to telling a story, both teams prefer to focus the users’ attention on the vital things, such as content, rather than captions. Therefore, the headlines were moved to the right and rotated in 90 degrees, thereby naturally giving way to the text.
In the case of Kitamura Makura the caption has been pushed to the right edge, making it feel like a part of navigation. With Canatal, however, the caption is still a part of the block and overall design.
Protec and Building the Future have made things a bit more interesting by making vertical text a part of the entourage.
Protec features huge captions that stretch from top to bottom. They are carefully set aside and shown on the left side, giving the content top priority.
In the case of Building the Future, the vertical lettering is even bigger. However, here it plays merely a decorative role, strengthening the traditional caption featured at the top of the text block.
Regarding SEO, it is not a good practice since headlines should be a part of document hierarchy and enclosed in corresponding tags. However, sometimes you can go off the beaten path and win over customers with design rather than search ranking.
While for the western world, vertical rhythm feels like something extraordinary and a viable trick to add zest to conventional designs, for our friends in the east it is the most natural thing. Let’s take a look at Kwok Yin Mak.
The design looks refreshing. The traditional black and white color scheme, lots of white space, logographs and of course vertical orientation make this interface look so special. The trend feels at home. However, even though we expect it to be here, the team behind the website has managed to save it from looking trivial.
A Pleasant Surprise
Vertical lettering is a rare guest, yet a welcome one. It is safe to say, that in the universe of everything horizontal, it is a little light that makes us smile. It pleases the eye with an unexpected twist in reading flow and effortlessly brings the essential things into focus.
It is a simple way to make things interesting without reinventing the wheel and going the extra mile.
UX design and a solid SEO strategy go hand in hand.
Design is there to boost user experiences, inspire users to spend more time on your pages, and ensure they don’t leave your site frustrated. This way, it minimizes bounce rates and turns your visitors into leads and, ultimately, sales.
However, designing a spotless website is pointless if it’s not visible on Google. This is where SEO shines. It increases your site’s exposure in the SERPs, drives greater traffic to it, and gives you the opportunity to delight a visitor with your gorgeous website design and quality content.
When merged together, web design and SEO are indicators of your credibility and professionalism.
So, let’s see how to combine them for a better online performance.
The Basics of Implementing SEO and Web Design
In the world of digital marketing, building your online presence on strong foundations is critical. If some basic aspects of your site are poorly managed, you cannot expect your web design or SEO to deliver exceptional results.
Here are key elements of any strong web design:
CHOOSING A DOMAIN NAME
Stuffing your domain with a bunch of keywords won’t help. They look spammy and may hurt both your rankings and user experience.
Remember that there are millions of domain names out there. So, your goal is to make your domain name catchy and memorable. It needs to be relevant to your business’ focus and be easy to spell and pronounce. To make your site easier to find, it’s always good to use your brand name as your domain name, too.
INVESTING IN THE RIGHT HOSTING PROVIDER
Choosing the right hosting plan directly impacts your website speed, server performance, and uptime/downtime. These are all important UX factors Google considers while indexing and ranking your site.
BUILDING YOUR WEBSITE USING A RELIABLE CMS
A solid CMS is one that is easy to use and manage. You should be able to design your site however you want, without taking additional courses in web design. It should also help you make your site mobile-friendly, add social media integrations effortlessly, and use various content management tools. The most popular CMS option is definitely WordPress, followed by Joomla, Drupal, TYPO3, and Squarespace.
When choosing the right CMS for your business, ask yourself how it will impact your online performance. For example, does it allow you to customize your URLs? Can you make on-page changes without changing the URL? Some systems create meta tags (meta descriptions and title tags) automatically, so you should check whether you can modify them.
The Link Between Web Design and Indexability
Did you now that Google crawls each page of your site individually when indexing it? That’s why you need to add internal links to make these pages findable by search engines. Most importantly, you need to check whether all your interlinks work.
Start with the simple Google search. For example, the site: operator will help you see all your pages that are indexed. You could also check robots.txt files(https//www.yourdomainname.com/robots.txt) to identify your site’s disallows. Sure, you can speed this process up using web crawlers like Screaming Frog or Google Search Console’s Index Status that will do the job for you.
Keyword Research and Meta Tags
On-page SEO can be viewed as a process of optimizing individual pages on a site to rank higher. In short, you need to do detailed keywords research and optimize your key page elements for them.
A title is the first element a visitor sees in the SERPs. It should be creative, intriguing, and authentic to stand out from other results in the SERPs. Above all watch your title length (it should be up to 60 characters) and add your major keywords to it naturally.
Meta descriptions tell a searcher what the page is about. It’s pretty limited- you need to use these 160 characters wisely to grab people’s attention and entice them to click on your link.
Headings increase the readability of your textual content, making it more user-friendly. Use them to separate your content into smaller chunks and help visitors find the information they’re looking for easily.
Google still cannot understand your visual content. When optimizing your images, infographics, and image captioning for visibility, make sure you have a clear alt text that describes what the image is about. Brief descriptions including your main keywords will be enough.
Information Architecture and URLs
Which URL seems more logical to you?
The first one, I hope.
Well-optimized URLs tell users what the page is about and help them find the desired information or products faster. Just like title tags and meta descriptions, they provide a wider context around your keywords for both users and search engines. Precisely because of that, your URLs need to be descriptive, short, understandable, and optimized for your major keywords.
Simplifying Website Navigation
Navigation goes beyond a simple menu bar at the top of your site. When used properly, it inspires people to stay more on your site and browse through it.
When building website navigation, it’s critical to understand the needs and expectations of your potential customers. Just like at any physical store, website navigation should help a potential customer find a product or content faster and guide them through their buyer journey towards finalizing a purchase. If a customer needs to waste their time thinking where to click, that’s a clear sign you need to improve your navigation.
The Impact of Page Load Speed on Rankings
Page speed is one of the most significant ranking factors. And, with the 2018 Speed Update, it has become a notable ranking signal for mobile devices, too.
Page load times are important for a good reason- they impact user experiences and can result in either higher conversions or bounce rates. Stats back me up on that. For example, did you know that your visitors expect your site to load in less than 2 seconds? And, if it fails to do so, almost half of them would leave it. Apart from losing potential leads and conversions, high bounce rates have a negative impact on your online performance and ranking in the long run.
For starters, use Google’s Page Speed Insights to find out how fast your pages are. Here are a few steps to take to boost your site speed, such as:
Choosing the right hosting plan
Compressing your high-quality images
Using browser caching
Removing auto-play content
Reducing the number of plugins and popups
Investing in a reliable content delivery network (CDN)
Website Responsiveness is the Mobile-First Era
With the number of mobile users, mobile searches have also grown. For example, did you know that 57% of all US online traffic is generated through mobile devices?
And, for your mobile visitors, their browsing experience determines whether they will buy from you. Stats say that 52% of your potential customers would not to make a purchase after a negative mobile experience.
Given these figures, it’s not surprising that Google is constantly striving to improve mobile users’ satisfaction and provide them with relevant results. This year, they finally rolled out the Mobile-First Index, meaning that they’re now indexing a mobile version of your site.
And, to meets these standards, you need to make your site design highly responsive.
What does this mean?
Use Google’s Mobile-Friendly Test to check how friendly your pages are to mobile users. When optimizing your site, pay attention to the overall site’s usability, such as its speed and page layout. How appealing is your site to mobile users? Can they read your content and see your videos without having to zoom and pinch continually? What about your CTA’s and links- are they easy to tap? Does your content fit the screen size, irrespective of its size? Are your forms easy to fill out from mobile devices?
Putting it All Together
Even if you believed that SEO and web design have nothing in common, I hope this article proves you wrong. Your website design impacts visitors’ perceptions of your brand, making it feel professional and authoritative. Above all, it impacts user experiences and impacts their engagement and purchase decisions. These are all factors Google takes into account when ranking you.
Your site is your front door for many of your customers. If old-school web design is holding you back, follow these tips to make it inviting again.
Joey Rubin, a business partner in the Los Angeles restaurant Neighbor, had a website. But he realized it wasn’t enough. He wanted something unique, something that better mimicked his carefully though-out brick-and-mortar operation and offered more freedom to showcase images. So he hired a web developer to come up with a new one. “We built the brand, the restaurant, the interior, the kitchen, the staff,” Rubin says. “We had to build an original site, too.”
His experience is familiar to many founders. By now, if you have a business, you have a website. But as your company grows, you may find that the do-it-yourself site that you built for little or no cost on a platform like Wix or Squarespace no longer meets your needs. Maybe you’re in the market for a signature look that stands out from your competitors’, or maybe you need more than you once did – a more sophisticated system of cataloging products, or the ability to process simultaneous transactions or an inventory-tracking system that can scale. If so, it may be time to hire a developer, a designer, or a combination of the two.
First, says Melanie Spring, founder of the marketing strategy firm Branded Confidence, decide what you’ll need from a new site. Do you need a calendar that communicates with a back-office reservation system, or an online catalog of products, that’s tied to a back-office warehouse? both require an API – an application protocol interface, which is how web-based systems talk to one another – and typically a developer who can enable that communication.
Be prepared to take a hard look at your budget. Brent Lightner, founder of the digital agency Taoti Creative, has a simple rule: “If you have less than $10000 to invest in your website, figure out to make a freelance web developer work on a relatively basic site. When your budget is closer to $25000, think about hiring a developer to build a more customized site.” A consultant can help you sort out the options if you have complex needs. Mukesh Vidyasagar, a founder of Cappsure It, which sells software that allows landscaper to track field crews’ activities in real time, hired a marketing consultant with online design experience to map out an upgraded version of his company’s site, which had been built with Wix. “He laid it all out using Elementor,” says Vidyasagar, referring to a website building tool that works with the popular WordPress platform. The new version “is way more sophisticated” than his original site, which had limitations with load speeds and integrating other kinds of marketing software.
You should also be aware that more users now access websites from mobile devices than from computers. That means your new site should be designed to shine on smartphones. “Design with mobile in mind,” says Spring. “Think about the mobile users and what they came to see.”
Originality is key, but avoid the temptation to layer on too many bells and whistles. What can you do without? Video with sound and “too many moving things,” Spring says, can put off potential customers an make websites take longer to load. And remember that Flash, Adobe’s software for viewing multimedia, may have been all the rage in the aughts, but now it’s out. “Kill it,” says Spring. “Your phone doesn’t process Flash,” which, given current web-browsing trends, makes it all but irrelevant. If no one sees your beautiful new site, does it exist at all?
References: Branded Confidence, Taoti Creative, Inc.
First on the list is MacawScarlet, a tool so fresh, it’s not out yet! But then, it’s from the guys who brought us the original Macaw, so lots of people are excited anyway.
Billing itself as a “live design environment”, Macaw Scarlet will be geared toward making responsive web design easier for everyone.
Wagtail is not a design tool, it’s a CMS. And yet, it could easily be included in the design work-flow, especially where content design is concerned.
You see, it has a fantastic feature called Streamfield, which works a lot like Medium’s post editor. The difference is that it’s customizable, and thus more powerful. This makes it a lot easier for the user to design content on each page.
Magic Mirror for Sketch 3
Here’sone for the Sketch users. Basically, it makes a sort of smart object designed to help you put mockups into stock photos.
Thisone gets my personal stamp of approval. It runs fast on my normally not-drawing-friendly tablet, and comes with just about everything you could ever want from a wire-framing app.
It’s also designed to work with phone-sized devices, which could be a great way to properly visualize a phone app interface.
Apple Watch wire-frame kit
Wire–frameUI elements for the Apple Watch! What more do you need to know?
There has been more than one wireframe toolkit for Apple’s Keynote software. It was only a matter of time before someone made it happen for Powerpoint. And they have. Hereitis.
Coming all the way from Facebook itself: “Origami is a free tool for designing modern user interfaces. Quickly put together a prototype, run it on your iPhone or iPad, iterate on it, and export code snippets your engineers can use.”
No word yet on how useful those code snippets actually are. But it’s Facebook. They have good engineers.
With simple tools, and a solid free plan, Marvel makes a great prototyping app. It integrates with Dropbox and Google Drive, importing any images you specify, and allowing you to link them together in a quick mock-up of an app.
It keeps your imported images synced, too. If you save new versions to Dropbox or Google Drive, your prototype app automatically gets updated.
Protosketch is a prototyping app (kind of) designed for the iPad. It comes with a UI kit (including tons of components), basic vector tools, alignment tools, and a lot more.
It’s currently in beta, and it’s only for the iPad, but if that’s your platform, this could be perfect for you. It plays nice with other apps, too: it can export your files in raster formats, SVG, and PDF.
Like many other tools on this list, Frontify does prototyping. It also offers tools to make working on branding and style guides as a group easier. Create your color palette, define your style, and create a library of UI elements, and share it with the rest of your team.
Use Atomic to pull in your files from Photoshop or Sketch and make prototypes from them. Version control, collaboration features, and more make this an excellent tool for slick, fast, iterative design.
Form is an advanced prototype creator that works in tandem with your iPhone. Create the prototype in your desktop or laptop, and see the results immediately on your phone. Plus, it uses Google’s Material Design principles to make your prototype look great.
Pixate specializes in high-fidelity “native” prototypes that are displayed on your phone and work a lot like the real thing.
Sandvox is a Mac app for the non-coders among us. It’s largely template-based (as is an ever-increasing portion of the Internet), but does make provisons for more advanced users to add stuff in manually.
It doubles as a sort of CMS for some kinds of sites, like blogs, and though the software isn’t “new”, recent versions have introduced Sandvox Hosting. The hand-coders among us might recoil at the idea, but for newbies, the package deal is actually pretty great.
It does work with any host, though, so if you want to handle that yourself, you can.
A site builder for beginners, XPRS offers free sites for personal use, for artists and students. There are pro plans for business and e-commerce.
WordPress may have its detractors, but others are taking it in surprising new directions. The guys over at Themify, for example, decided that it was time to create a design tool on top of the publishing platform.
The result is ThemifyFlow which allows you to create custom, responsive WordPress themes from a drag-n-drop interface. Best of all, it’s free and open source.
Cornerstone is sort of competing with Themify Flow, in that it offers a visual way to create WordPress themes, right on top of WordPress itself.
It operates differenly, however. For example, it features a live code editor, and other features design to give developer-level access to the front-end design. Also, it’s not free, unless you buy the XTheme.
Quards is another page builder plugin for WordPress. Most of the design work is done for you, but instead of choosing a single template, you build each page with “cards”.
These are basically pre-made layout sections which can be mixed and matched to build a whole page. It’s good for landing pages, arranging individual articles in new and original ways, promo sites, and those sorts of things.
COLLABORATION & PRODUCTIVITY TOOLS
A quick and easy tool for Slack users who need to share their design work a lot. With extensions/apps for Adobe CC, Sketch, Chrome, and OSX, it simplifies sharing whatever you’re working on.
Want to see previews of whatever you’re working on in Photoshop or Android? Just installSkalaPreview, and you’ll be able to send lossless, color-perfect previews to just about any mobile device.
It comes with the option to plug the device into your computer via USB instead of using wi-fi.
RightFont is a fast, pretty font manager for Mac that integrates with Adobe CC and Sketch.
The jQuery3alpha has been released. There aren’t any new features to speak of, but there have been extensive re-writes of old features, bug fixes, and performance improvements.
Speaking of jQuery, there are a number of new plugins out that could make a designer’s job a lot easier, especially if you’re a designer who also codes a bit.
We start with SimplerSidebar, which makes sidebars. It’s small, it’s fast, it’s pretty. Just don’t use a hamburgermenu to trigger it, I guess.
When filling out forms, I occasionally click on a field, get distracted by something, and then come back to it. If that field was labeled with a placeholder attribute, I sometimes have to un-select it to remember what I’m supposed to be typing.
Silly, but human.
smart–placeholder solves that design issue by keeping the placeholder visible below the text being typed. Neat, right?
We’d be remiss if we didn’t call attention to the great work being done on already well-known apps. Here are the ones that have had some noteworthy updates recently:
Webflow has been integratingthird–partyservices into its functionality (much like the rest of the Internet) in some new ways. As of now, you can add functionality to your web forms right from Webflow.
You can add e-mails to Mailchimp lists, send out tweets, add data to Google spreadsheets, or make a new note with Evernote. You can also, incidentally, have your form send an e-mail.
InVision has been introducing newfeatures steadily, including free, unlimited mobile user testing, a workflow manager, Dribbble integration, and emoji. Yes, emoji.