Web Design Trends of the Future
One of the hottest techniques in web design is the HD background, enabled by the growing commonality of HD displays. But it’s not going to be easy when you’re creating a pattern whose trademark is visual complexity.
In this article, we’ll take a look into the future of web design. It’s not a question of if HD web design will dominate the web, but rather when high-res monitors become widespread enough to necessitate improved visual designs.
Let’s get a head start. We’ll explore how to build an HD background, using images, video, or animation, and layering everything together.
These are the most descriptive words of modern web design when it comes to background images. Not only are designers thinking about HD, but they are taking HD to the extreme with backgrounds that occupy the entire screen.
After all, as described in Web Design Trends 2015 & 2016, vision dominates a lot of our subconscious interpretation of the world around us. On top of that, pleasing images create a better user experience partly because we perceive attractive objects as working better. It seems harshly superficial, but when it comes to design, perception is reality.
High definition screen resolutions provide the perfect opportunity for users to see images with a level of detail that just wasn’t previously available. Small image details – such as the texture used by Junction Moama to the varying hues in Macquarie Park (both shown above) – add to the visual polish of the interface, contributing to the ever-important first impression.
Changing the UX 180 Degrees Made Grew Sales
Were you ever asked to fully change the experience and UI of a product that is used by more than 3 million people? Well, it happened to me.
Let me tell you my story and the journey of the 180-degree change of Bannersnack.
Have you heard about Bannersnack?
If you are one of our users, skip to the next section. If you don’t know what Bannersnack is, take a minute and check it out. Bannersnack is the leading banner making tool for creating static and animated HTML5 banners, Flash and various social media banners, all from one place. Find out more here, or keep reading to find out the whole story about the redesign.
Today’s world is changing fast, but the digital world is changing even faster.
More and more often, we see well-established brands, apps and services changing and adapting their look and communication frequently. Technology evolves at an astonishing speed. People want to do more things faster and they need tools that can make their lives easier.
Bannersnack began its journey in 2008, the culminating era of Flash banners. It was launched as the banner making app that helps you build flash banners within a couple of minutes. It was an extraordinary achievement and a revolutionary product, compared to other similar software.
Now, as flash is dying, our attention shifts from Flash to HTML5 banners; more and more static banners are created daily and the appearance of social media has blown away everything we learned about banner design.
Styles Are Continuously Changing
I was recently looking through some screenshots of apps from earlier versions of iOS. It had me thinking about where design is headed over the next five to 10 years, why we continue to iterate on style, and whether design is really getting better or simply changing in a long-term cycle for the sake of change. Is design progressive or cyclical?
The first point to consider is what style is, and why it continues to change.
In the case of digital design, there is a constant desire to see and create new styles. I’d liken it to the iPhone, for example. The style of the design is difficult to fault, yet we constantly crave a radical redesign at every year’s keynote event. The style might be different but often it’s very difficult to argue it is in fact better. The iPhone 6/7 might look different compared to the 5, but does it grip in your hand as well? Does it rest on the table flat? It’s a classic case of constant desire for change that does not always yield a better product. The same concept can be applied to digital design. We love seeing new things, experiencing new things, and design is no different.
Creatives are differentiating styles in order to maintain a unique selling point for services. Again, it’s not changing styles because they are better and help the user — it’s change as a byproduct of boredom, competition and the requirement to stand out.
José Espinosa of MIT wrote an interesting essay on a similar topic but around the concept of fashion. It’s hard not to see crossovers between the industries. This was one of the most interesting sections:
“As time passes, more and more people adapt the new style, but unfortunately not all of them fully understand its underlying principles but nevertheless follow the external changes in the fashion. Thus, the new style has become mainstreamed. The pioneers get frustrated because their style does not serve as a differentiation signal anymore.
Guide to Static Website Generators
Most developers already understand how content management systems work. The popularity of WordPress has permeated the globe and become a staple for creating any blog.
However a growing trend is the use of static website generators for blogs or small websites. These are dynamic compilers that turn preprocessed code into static HTML/CSS/JS files that can be maintained on a server without a database. And while this may not be the best workflow for every site, there are many reasons why developers have been flocking to static site generators.
In this post I’d like to explore the depths of static website generators: what they do, how they do it and why you might want to use one. If you simply don’t understand static site generators then hopefully this post will shed light on the subject.
Origins of the Static Web
The web actually started as purely static HTML files in the 90s. Yes, there were larger applications that ran on Perl or Java, but HTML was the quickest way for anyone to publish content online.
Static sites were meant to deliver content fast. HTML pages are parsed directly by a web browser, so HTTP latency is the largest factor for load time.
Over many years, the web grew to include databases and powerful engines like WordPress. These engines quickly became the go-to solution because they could run powerful applications without much need to write backend code.
With the growth of CMS engines, managing load time became a worthwhile issue. Developers needed to worry about database query time and bulky templates. Caching helps but it rarely delivers the same performance as a static webpage.
This fixation on static sites has come at a time when content management systems seem too bloated for smaller projects. It’s almost like the web industry has come full-circle, realizing the benefits of static HTML pages – but this time we have much more powerful tools at our disposal.
Great Of Web Design
When visitors land on a new website they usually have no idea where to begin. They usually just look around for nav links that might provide the info they’re looking for. But the newest trend of the “start here” page offers a much better experience.
Brand new users on your site should be inspired to keep browsing deeper into your posts. The best way to achieve this is with a single unified intro page featuring links, a small guide to the site, and even some background about yourself & the site’s history.
In this post I’ll look into the trend of start here pages to see what they offer and how you can take advantage of them in your own projects.
Introduce Your Website
The biggest reason to use a “start here” page is to introduce new visitors to your website. Since each site offers something different the “start here” pages will have a different goal based on content.
Your page should share vital information and aim to educate visitors about the site. But it should also drive visitors further into the site by sharing the best resources and links to get started.
Personal blogs run by one person could have a “start here” page that introduces the person and their history with the website. This is the case with Darren Rowse on his site ProBlogger.
This is actually one of the more well-designed examples because Darren has years of experience with writing, design, and user conversions.
He offers a bunch of links to relevant posts right off the bat. He also has an embedded intro video for new visitors who want to learn more about the site. Down lower on the page you can read about Darren’s journey and how he built ProBlogger into the empire it is today.
Conduct a Card Sorting Study
Opinions differ just like tastes. That is why when making important design decisions we need to consider what users think. We may argue whether contact information should go in the “about us” section or in the footer or elsewhere and each team member may be right in a sense, but the only opinion that matters is that of the user.
But how can you incorporate users’ ideas into the information architecture of a product?
I suggest card sorting. It’s simple, easy to conduct and analyze and it’s an informative UX design process.
Card sorting is a user study where participants organize content pieces into groups based on topic similarity. The group labels may be predefined (closed card sorting) if you already have some kind of information architecture and navigation. However, it’s even more informative to leave group labeling to the participants (open card sorting), especially if you are unsure about the category naming. This way you will get an understanding of how your users “speak” about the same topic.
Now let’s go through the process of conducting a card sorting study step by step.
Choose Your Methods
Depending on your project goals you can choose to conduct either an open or closed card sorting study. While closed card sorting results may be easier to analyze, open card sorting provides more insights into user mindsets.
Another thing to consider is the medium of the card sorting research: web/remote or traditional paper based studies. There are plenty of online services that give you every single tool you need for a remote card sorting study. Just like remote usability testing, this type of research method comes with pros and cons.
On one hand it’s easier than ever to create cards, send the test to a bunch of users and let the system analyze gathered data and give you a final category tree. On the other hand during a moderated, real life card sorting session the researcher can observe and take notes of discussions, behavior, ideas and questions, which brings a somewhat emotional touch to the raw data.
Interaction design is a process in which designers focus
These two little words are being used a lot in the design sphere these days. But what truly is interaction design? And what makes you an interaction designer? Here, we’ll answer both of those questions and offer a showcase of some great interaction design work.
Interaction Design 101
Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.
Interaction design in terms of websites and apps is something we have been talking about for 10 years or so, but those bigger conversations and much never. One of the best and most cited introductions to the concept was published by Bob Baxley in 2002 in a 12-part series that defined interaction design for web applications.
“Introducing Interaction Design” breaks the field into five pieces that are still useful and relevant today:
- Human/machine communication is the translation of conversations between the device and user.
- Action/reaction looks at how interactions happen and unfold.
- State ensures that users know what is happening and why in terms of the application.
- Workflow ensures that users know who to use a tool or application and what happens next.
- Malfunction takes into account mistakes that are bound to happen.
Further, there are certain considerations to keep in mind when creating design interactions. Usability.gov offers basic questions in six different categories that can help shape how the design comes together.
- What can a user do with their mouse, finger or stylus to directly interact with the interface?
- What commands can a user give to interact with the interface?
- What about the appearance gives the user a clue about how it functions?
- What information do you provide to let a user know what will happen before they perform an action?
- Are there constraints to help prevent errors?
- Do error messages provide a way for the user to correct the problem?
- What feedback does a user get when an action is performed?
- What is the response time between an action and response?
- Are the interface elements a reasonable size to interact with?
- Are edges and corners strategically being used to locate interactive elements?
- Are you following standards?
- Is information chunked into a few items at a time?
- Is the user end as simple as possible?
- Are familiar formats used?
Role of an Interaction Designer
If you find yourself thinking about or asking the questions in the list above, you are an interaction designer.
An interaction designer is the person on the design, development, creative or marketing team that helps form and create a design strategy, identify key interactions of the product, create prototypes to test concepts and stay current on technology and trends that will impact users.
This may sounds like a lot of different concepts compiled into one fuzzy job description. To make is it simple: Companies hire an interaction designer to make sure their digital applications work and function in the hands of users.
Use Color in Web Design
The current landscape of color in website design is interesting to think about. Most websites look more or less the same, yet color can be a powerful tool in design.
I’m not trying to state this as anything revolutionary or as an extraordinary find. But if most websites have similar color schemes, what does that mean for color? Actually, it means a lot. Imagine a world where every website was colorful – it would possibly be very pretty and rainbow-filled but it would mean that nothing stood out. It’s like having every paragraph bolded in your essay.
Therefore, when color schemes are muted, it allows for many opportunities.
Draw Attention to Anything You Want
Most websites start with a basic grayscale look – white background and black text. Color comes in as accents that get you to look places. That’s why websites are not filled with color – they use it to get you to look at the buttons, headlines or links.
Take Vibrant, for instance, when you first land on their home page the background and images are black and white. The logo, call to action and the hamburger menu are bright yellow. They stand out and grab your attention quickly.
Another example is Takeit; when you first land on their home page you’re greeted with a big blue background. However, everything else is white. The big headline that’s front and center is also the center of attention. Shortly after your eye notices the smaller but still noticeable App Store button. And that’s how color can guide a user’s attention.
Create Personality
Color is wonderful because it can set a tone and mood for a website or brand. Beagle is a service for creation project briefs and their site starts of with lighter earth tones. As you scroll down their homepage you view pleasant shades of brown, charcoal, green and even pink. The earthly tones look professional and elegant making for a great impression on behalf of the company.
Reality and Web Design
The 2D web could become immersive, interactive and tangible. Imagine Wikipedia as an extensive multimedia library. Instead of reading about the Egyptian pyramids, you could wander around them, explore the inside of the pyramids, view the texture of blocks used to build it or solve a puzzle to gain access to the pharaoh’s tomb. You could even have a virtual guide accompanying you, narrating the history of the pyramids and answering questions. And all this while being accompanied by distinct ambient sound effects and sounds.
Not impressed?
What about surfing Amazon, searching for the ultimate wedding dress? You could try them on, see yourself from a 3D perspective. You could create multiple avatars to compare several dresses to could choose the one that fits and have it delivered in one day. Visit a virtual car dealer, test-drive the car, select options, tweak the seat position, see if it suits you and … summon it (Hello Tesla!). Science fiction? Twenty years ago, shopping on the internet was science fiction. Twenty years ago, the idea that you could watch the Olympic Games on your VR headset was equivalent to Star Trek’s holodeck.
The hardware to achieve this, while still in infancy, is here. HD cameras, 360-degree cameras, fast graphical processors and VR handsets are the pathfinders to a new era. Expensive, bulky and sluggish at this time, as the rate of adoption will rise, the hardware will get cheaper, smaller and faster.
Illustrator vs Sketch
The ever-expanding world of design can be tough to comprehend as a newcomer. With so many tools and techniques available it’s hard to know where to start.
Three of the most widely used design programs are Adobe Photoshop, Adobe Illustrator, and the newer Sketch by Bohemian Coding.
In this guide I want to compare these three titans of industry to see how they stack up for common design tasks. All three programs are incredible, but they each have their own strengths and weaknesses for certain creative tasks. One you know which tool best fits the task at hand you’ll have a much easier time learning and mastering digital design work.
UI Design
Interface design usually relates to websites and mobile apps, but can also include game UIs or any digital screen that takes user interaction.
For years Photoshop was the #1 choice for UI design. In PS you can build vector icons and textured backgrounds to mix into one common layout. But Photoshop was always intended to be a photo editing suite, and while Fireworks was better it has since been discontinued by Adobe.
This is where Sketch comes into play. The very first release of Sketch App was in late 2010. It has since grown massively with a large community fostering learning materials and entire websites dedicated to free Sketch resources.
When it comes to UI design Sketch is currently the king. This program’s purpose was to be a UI design suite for web & mobile. Patterns, textures, and vectors all intermingle with each other much easier than in Photoshop.
The only downside is that Windows users cannot run Sketch because it’s OS X exclusive.
