Web Design Trends: What to Look for in 2018
Confession: Here at WebEnertia, we’re design geeks. We don’t just create websites for a living—we live and breathe this stuff. We’re looking forward to the year ahead and wanted to share some of the exciting new trends we think will make a splash in the world of website design this year.
iPhone X Notch
Ten years have passed since Apple launched its first iPhone, and the company is shaking up the mobile web design and development world again with iPhone X. Topped with advanced facial recognition software, wireless charging and the highest screen-to-body ratio, iPhone X provides web designers with many new opportunities and, unfortunately, just as many challenges.
The iPhone X screen is 145 points taller (approximately 20 percent more space available for content) than the iPhone 7. Apple centered the front-facing camera and speakers, creating a bump-like notch. Viewed in landscape mode, websites not formatted for iPhone X get cropped as the design gets covered by the notch. Therefore, designers must account for the notch to avoid UX problems. Thankfully, Adobe offers free design resources to tackle and take advantage of this awesome, but controversial, feature.
When is a backdrop more than a backdrop? When it’s interactive. We’ve spotted a few sites that bring background to the forefront with awesome abstract interactive components users will love. Getting playful with the canvas is a concept we can’t wait to explore—check out these interactive hero banners from Stanford and Google Any Pixel to see what we’re talking about.
Make every moment count by adding cool animations when transitioning between pages. “This is a great way for creative companies to show off what they can do and demonstrate attention to fine detail,” says designer Daniel Millan. We especially like what Ember House and Orsolina 28 have done with the place, and can’t wait to try these easy plugins that can really spruce up “animsitions.”
While we’ve found lots of fun ways to use videos as the background for website sections, we’re excited to experiment with using it to add animated elements to pages too. How cool is this psychedelic head graphic made using an mp4 for the Awwwards San Francisco website? We could watch it for hours.
Step Into Our World
Who needs 3D glasses when you can design in 3D? While this may not work for every company, we can’t wait to play around with using 3D objects to really bring a project to life and transform the user experience. Check out Paper Planes and The Dilla Dimension to see the difference 3D makes.
Make it Micro
It’s no secret that people like interacting with websites that react in return—it’s why “liking” things on social media (and now even in messaging apps) is so satisfying. “We predict subtle micro-effects will be big next year”, says designer Valerie Ouano. “Understated effects that provide feedback or show that you’ve completed an action can be even more intriguing and look sophisticated.”
A great example of this is the recently revamped “clapping” icon on Medium. Hover your mouse and the icon pulses, and then click on it and it lights up—so much more rewarding than the old school “like” it replaced. (Seriously, try it.)
Typefaces are a sign of the times as much as hairstyles, fashion, and cars, and next year we predict bold typefaces will take center stage. “The right messaging combined with the right typography creates an amazing impression and an engaging experience on either mobile or desktop,” says designer David Scherbarth. Check out Andy Wei and Simply Chocolate’s stand-out style.
Data Gets Real
With the rise of AI and machine learning companies today have unprecedented access to data. We predict we’ll see a lot more real-time data visualization as a marketing tool. And while you may think this only applies to tech companies, great data can engage audiences in any arena. Check out the Rhythm of Food and Evolution of the Web to see just how revealing (and interesting) data can be.
Whatever you have in mind for your next website design, you can count on WebEnertia to make it shine.
Also published on Medium.