NYX Ditech

Categories
Brand & Identity UI Design Web Design

7 Unique And Amazing Website Layouts To Draw Inspiration From

There are zillions of websites over the internet, and standing out from the crowd is a big task. A lot of designers follow the tried and tested design format of the website layouts since it’s a safe bet. But, by doing that they become part of the crowd. If you browse through the internet today, you will find a lot of similar websites; we are not saying that they are designed poorly, but they are not unique. That said, you still come across some website layouts that take an alternative approach to designing and come with something special. In this article, we will show you some examples of unique website layouts designs, so you can create sites that break the monotony, without compromising on user expectations.

1. The Goonies

The Goonies use a full-screen hero image that scrolls into the page and transitions into a series of grid website layouts. The Goonies is a 1980s classic movie, which is turned into a promotional-style website by Joseph Berry. It has won an honorable mention and Site of the Day award from Awwwards. It is an excellent example of storytelling and modern web design. The interactions and animations create a highly engaging user experience and allow fans to relive some of their favorite moments from the movie.

The Goonies - Website Layouts

2. Heco Partners

Heco Partners, a Chicago-based design agency, draws you into their website with its flowing movement. On its landing page, you see the words, “We turn information into experiences that people care about” hovering above an undulating wave. These two elements, in combination, symbolize their promise of transforming ideas into action. The visitors straightaway get a powerful sense of who they are and what they do, without even scrolling down. This site is a superb example of the right way to combine a portfolio with more detailed background information, as illustrated by each of their projects. 

There are no obvious navigation cues, but an arrow prompts you to scroll down to get the whole Heco Partners story, but you can also deviate into their project-based case studies. The beauty of the fading transitions between each section, as well as various other animations, makes the site a pure pleasure to scroll through. 

Heco Partners - Website Layouts

3. Beagle

Another excellent example of visually and progressively telling the product story in a simple and easy-to-digest way is Beagle. It’s challenging for many startups; even experienced companies miss out at simple storytelling. It gets even trickier when companies are introducing new concepts to existing markets. There are obvious questions in people’s mind – what is your product? How does it work? Why do I care? Beagle answers all those questions while simultaneously showing their product and compelling the user to purchase. Another interesting point to notice is that it is one of the few sites to implement scroll hijacking successfully.

Beagle - Website Layouts

4. World of SWISS

SWISS airlines have created an incredibly immersive site that tells their story and describes what it’s like to fly with them. They have done a fantastic job by using strong visuals and animations to introduce the user to different sections of the site that are packed with information beyond the mundane sales and marketing pitch that is very commonly used these days.

World of Swiss

5. Nelu Cebotari’s Portfolio

Nelu Cebotari’s is a portfolio website that uses a three-column hero that transforms into the main navigation menu upon scrolling. It is a personal online portfolio that captures the creator’s personality and skills as a designer while avoiding the stamp of a cliche.

Overall, the color scheme makes an impact. Prominently, the background color choice makes the black text really stand out. Another unique part of this design is its navigation. It is placed upfront and center, as are the calls to action – about, work and contact. Hovering over each of these reveals a box that slides up from the bottom. Each of these squares has a bit of text prompting you to learn more or to get in touch. This stripped-down, spartan approach is distinctive, and not commonly found.

Nelu Cebotari’s portfolio

6. Never Summer Snowboards

Never Summer Snowboards uses a full-screen background video that provides a portal into more traditional eCommerce pages. Never Summer concentrates on its products without losing its sense of fun. It’s easy for action sports companies such as snowboard manufacturers to coast on the charisma and abilities of their riders. Whoever goes out loud and bigger can sell almost any snowboard to their adoring fans. Never Summer allows the riders to be a part of their story. However, the real focus here is on their high-quality products.

There are a lot of technical specs, but they’re there for reasons  – they’ll help out customers on the slopes. Instead of using jargon, they inform you how all of these materials and construction techniques make their boards better.

There was every possibility that this site may overload customers with information since there were many technical specs and a focus on board construction. But, they avoided this by injecting plenty of personality and character. 

Never Summer Snowboards

7. Sounds of the Universe

‍‍Sounds of the Universe digitally allows its customers to get the real-world experience of going to the record store. The grid-based representation of a brick-and-mortar record store is out of the box and makes the site stand out.

Sounds of the Universe is the digital offshoot of the eclectic record label Soul Jazz. From reissuing rare funk, jazz, and punk, to putting out new releases, they make sure people listen to music that gets less attention.

The eCommerce website represents many genres with plenty of background information about the artists and sound samples. What is particularly enticing about the site is that its layout design beautifully captures the feel of being in a record store. You can flip through various releases in a gallery, if you like something you can click the cover for a closer look, just like the real store. By translating the physical act of browsing through records into a digital experience, Sounds of the Universe sets itself apart from other music retailers who lack this sort of familiar interactivity.

Sounds of Universe

We hope that you’re inspired by the creativity shown by the designers of these sites. It takes courage and lots of confidence to attempt a unique design style, but it definitely pays dividends by setting yourself different from the clutter and adds a unique element to the user experience. Want to talk more about creating out of the box designs? Get in touch with our experts.

Read more about how you can highlight your content in the specific website layouts

*all images are sourced from respective websites

Categories
Brand & Identity UX Web Design

Some Tips to Get Rid of the UX Debt

A lot of times you will find yourself facing a situation wherein your product will show an inconsistent behavior or performance. This occurs due to the long-term sacrifices you have made over time for short-term gains, or what we call ‘UX debt’. In our previous article, we discussed Design Debt. We covered what it really means, its identification, impact and common causes. In this article, we will cover the ways through which you can erase UX debt most effectively and efficiently. It’s very common for a company to release a bunch of features in one go to gain market share as they focus on quick user acquisition. As a result, the cleanup work gets delayed and is pushed back for later sprints.

Getting rid of the UX debt takes time, and cannot be completed in one go. If you think that you can get rid of the UX debt in your next release, then you probably need to re-think. It’s best to create a plan and follow it meticulously to eliminate your debt. Follow the below-mentioned points to erase your UX debt:

Make a UX Debt Inventory

The first step towards erasing UX debt is to understand the debt. Whether you are a new hire or an existing team member, you must be aware of what you’re up against. This starts with creating an inventory.

For this, you need to roll up your sleeves and get your hands dirty. Use the product yourself and highlight anything you find unintuitive or confusing. Keep noting down your comments as you use the product. Another great way of performing this activity is by maintaining a spreadsheet within your team’s cloud folder and evaluating the heuristics together. The team can review the system based on some important criteria including findability, accessibility, clarity of communication, usefulness, credibility, learnability, overall aesthetics, persuasive design etc.

Evaluation process

You can create a clear picture of UX gaps by involving the whole team. The evaluation process may last a couple of weeks. Once the evaluation process is over, make sure you keep a realistic and manageable target date to slowly fill up the UX gaps.

This exercise is highly informative, however, you’re not the intended user. After conducting a UX debt inventory, you need to validate your findings by observing actual users and subject matter experts. This will help you better prioritize the work with product managers for the payback sprints or the backlog.

Prioritize Your Work

Once the UX debt inventory is ready, you must prioritize the tasks in order to address them in realistic stages.

The selection must consider a few factors:

1. How severe is the issue?

The severity of an issue must be the first factor to be considered as it may create a huge impact. How critical and big is the issue? Is it stopping users from doing their work? Is there a safety or security risk? If the issue is causing a potential customer to turn around and look to a competitor’s product, then you know that it is super critical. These kinds of issues must be right at the top of the to-do list.

Now, look at the flip side. It’s not necessary that only problems and roadblocks should be considered on high priority. If some improvements save hours of time in the course of a month, reduce errors and substantially add to the user experience, they must also be considered on high priority.

2. How long is it going to take to fix?

If all you have to do is tweak the CSS, you might slip it into the next build. On the other hand, if it’s going to require a significant amount of development or will have to be thoroughly regression tested, it may make sense to hold off until it can be resolved with other issues requiring similar treatment.

3. Who will be tasked with addressing the issue?

If the task has to be done by the UX team, and they have the bandwidth, it may be given a high priority. If it requires the attention of a specific developer who is already assigned to other high-priority work, then it will have to wait.

Make And Follow a Schedule

After prioritizing your debt, the next step is to work with product management to get it into your release schedule. Agile is the most popular approach to software development these days.

If You Aren’t Using Agile –

If you’re not using Agile, your work is most likely planned basis a release cycle. The management of your organization takes a call on what will go in the next release. They consider various factors like development effort, need of the feature, selling points, what bugs exist and how bad they are, etc.

It is recommended that UX debt issues must be handled as bugs. The real benefit of this approach is that the debt items can be entered and tracked using the same tools and business processes as bugs. This ensures timely review and treatment. Ideally, a representative from the UX team should work closely with product management when releases are scheduled.

If You Are Using Agile –

Companies that employ a healthy Agile process to prioritize debt and other types of works find it easy to manage everything. They don’t face any problems in prioritizing debt with other types of work, assigning it story points, and fitting it into sprints.

UX debt should be understood as the responsibility of the entire organization and not just the UX group. There must be a great synergy between all the teams. That said, the best way to eliminate UX debt is always avoiding it in the first place. Our UX designers will be happy to discuss your UX, UI and other design requirements; talk to them now!