Five UX Prototyping Ideas For Your Startup Website!
How do you define user experience?
Is it the experience your visitors have on your website? Is it how much they interact with your site, or how easy it is to use? Is it the takeaway for your visitors? Or is it defined by how highly converting your site is?
Looking at website design as a “big picture” kind of a deal, it’s all of the above.
Imaginovation co-founder Michael Georgiou, writing for Entrepreneur, even calls user experience “the most important metric you aren’t measuring”.
Without even letting you realize, user experience is playing a huge part in your website’s overall success.
According to the User Experience Professionals Association, user experience is:
“Every aspect of the user’s interaction with a product, service, or company that makes up the user’s perceptions of the whole. User experience design as a discipline is concerned with all the elements that together make up that interface, including layout, visual design, text, brand, sound, and interaction.”
So every single aspect of your website design can — and should — include attention to the overall user experience.
That sounds fine from a hindsight point of view. After all, at some point, each of us is the user, and we prefer a good experience.
But how can a designer factor that into the prototype and wireframe for their website, ahead of time?
Considering the product or services, the brand, and the intended audience will all vary depending on the circumstances, how well you know your brand, and last but not least: the website in question.
But these five prototype ideas for a startup website can give you a jump start in designing a site that caters to user experience.
Asymmetrical layouts are a popular trend in website design as a whole these days. They’re prized for being unusual and, by definition, “out of the box”; instead of holding to a more traditional grid layout, asymmetrical design can work the same way as an open floor plan in a house, allowing more space and breathability.
But layouts like these are more than just another pretty (asymmetrical) face.
A layout that isn’t exactly traditional in its placements can do two important things:
- Draw attention to specific elements
- Lead the eye, helping the viewer along a pre-defined journey
These two features factor heavily in good user interface design.
Firstly, drawing attention to specific elements within the design highlights features and information that will be useful to the viewer.
Everyone has had that experience at a badly designed website where they have to struggle a lot to find the information they’re looking for. Nobody likes that experience.
So even while deciding which features will be highlighted within your non-traditional layout, give priority to the content that is most likely to be searched by your viewer. Information, such as product listings or contact information, should likely be high on the list.
Secondly, asymmetrical layouts can help your viewers along in their travel through your website.
And it’s true, more traditional symmetrical websites can do this as well. The important difference in regards to UX is that asymmetrical layouts, as mentioned, open up space, giving your site breathing space.
Even as your viewers traverse content and find what they are looking for, an asymmetrical layout highlights and leads them seamlessly to other important sections of the website with a unique aesthetic.
The designers of Hirondelle USA know how to get the best out of an asymmetric layout. The off-centered content plays a crucial part in making the composition imbalanced.
The home page of Claudio Guglieri is another example of asymmetrical layouts. First, the phone placed a little down, interfering the succeeding work section and then the subtle irregularity in the pictures within the grids brings a sense of imbalance.
In terms of getting the attention of a viewer, it’s hard to think of a more effective choice than using the design that moves.
Videos themselves are hugely important in terms of marketing and branding. And the video makes a huge difference in engagement and how long a viewer stays on a certain website, too. Forbes Magazine, for instance, notes that the average internet user will spend up to 88% more time on a website that includes video content.
So how does that translate for micro-movements?
Well, it’s a relatively new trend, being explored by a number of prototype designers across the web. So the research into statistics hasn’t yet been released.
But with moving design, creating such a huge impact in video form, it follows that micro-movements, micro videos, gifs, and even static looped pictures with an occasional flicker of change will all get — and keep — the attention of the viewer.
Micro-movements, as the term implies, can be incredibly subtle, but their influence on engagement and user experience can far outweigh the sum of their parts.
Are you fond of card games? If yes, then The Cool Club has something cool for you. The smoothly moving animal cards in the banner are enough to grab attention and entice the visitor to scroll. They have something for star wars fans too in their basket.
Locomotive website explains how best a web design agency can play around animation. Floating objects — moving seamlessly upward or downward on dragging — not just grabs the attention but engages the visitors too.
Fluid or organic design is another form of layout that is rearing its head as exciting web design trends.
This design choice uses shapes, colors, and movements that are drawn from life and nature. So rather than a box with content, you might have an ebb and flow background with shapes that put the viewer in mind of a pond.
The idea is that the design renders the content more approachable.
This type of design is increasingly effective as more and more people deal with information overload, anxiety, and other issues that might make processing content more difficult.
Fluid design should take some of the formality away from a website’s layout, making it easier and more organic for the viewer to process the content, pay attention, and follow the logic of the website layout.
It’s easy to think in terms of traditional shapes. But just because something is easy — or because it is traditional — doesn’t mean that it fits every circumstance. And leaning toward fluidity that is easy on the eyes — and on the brain — definitely makes for better user experience.
A section of 120 Water Audit’ exhibits the organic shape of waves as a subtle background for obvious reasons (as the company revolves around water).
Le Cab Com not just displayed the irregular shapes but animated them to form a giant irregular shape. To bring consistency across the design, these shapes are used as the favicon and in page transition effect as well.
Everyone likes interactive content. And it doesn’t always have to be content that asks us questions and demands input, either.
Sometimes, it just means something as simple as mousing over a word or phrase and receiving an acknowledgment of our existence from the website we’re looking at.
Again, just as with the previous entry on fluid affect design trends, it’s important to take the heightened anxiety of today’s world into account when designing a good user experience. Keeping the viewer calm, engaged, and invested while helping them to find what they need and eventually convert can sometimes be as easy as giving them a say in what they see on the screen.
To this end, a growing number of websites have incorporated small, easy to play games on their pages.
And while games which don’t put too much of a stress on the viewer can be a good idea, they might also distract from the ultimate point of your startup, preventing the viewer from moving further on their journey.
Another suggestion is to incorporate small changes — alterations in color, fade-in pop-ups with information or clarifying content, or even a small noise of acknowledgment — when the viewer mouses over certain items. These changes would most usually be included with clickable photos, links, or content that needs further definition.
But these changes could also be incorporated as “Easter eggs,” in random content, or other features that fit with your particular startup.
With acknowledgment from the site, the user experience is heightened; and with extra content like fade-in pop-ups, it makes it easier for a user to find the information they need, right at their fingertips, without having to hop back and forth between pages.
The website “Pixels by Tomer Lerner” has a typical example of mouseovers. Quite satisfying it is to see these geometric shapes responding to the mouse movement, and moving around in different directions as you move the cursor on them.
Mainworks creatively displays its work in a grid layout comprises of textured images of each project. Every image comes to life just as visitors hover over a picture (one at a time) and displays the project information on the screen.
White space plays a big role in how quickly and easily we process the information we see.
If there isn’t enough white space, and there is too much content, we will miss the main point and potentially not process any of the information at all due to being overwhelmed.
If there is too much white space, we might feel like we’re missing out on something. Or we might even feel like something’s gone wonky with the website loading, and we have to refresh it and try again.
The proper and balanced use of white space in website design can do at least two things for your viewer’s user experience:
- It can highlight important information
- It can contribute to a minimalist aesthetic
As designers, the last thing we’d want for our viewers is to get lost, swamped, or overwhelmed in the content we are providing. Creating enough space around individual pieces of content can help. However, you can always leverage gestalt principles to incorporate human psychology into the design.
And minimalist aesthetics, again, contribute to a lessening of anxiety and to engagement.
Squarespace briefly explains its three core features one after another while using a white square-shaped foreground. Besides, the whole layout has very fewer elements to keep the distraction less. While the white call to action “GET STARTED” gets the well-deserved spotlight.
Tinker is for those looking for a custom wristwatch by choosing everything from colors to style. Which makes sense why the designer uses the white space to show the watch in pieces. Quite creative, isn’t it? The site overall religiously uses the negative space by just displaying watch information and price; no long text, not even the call to actions.
Each of these five points above belongs to just one part of overall user experience, rather than being a prototype of the whole.
Overall, how you design your website will differ depending on your audience and your market niche. But certain things prove true with the user experience across all sorts of types of websites: no user wants to feel hassled or overwhelmed with a site. Every user wants to be able to find the information they’re looking for with a minimum of fuss, and users are more likely to engage with a website that they find appealing and easy to use.
Ultimately, the best prototype for your startup website will be one that is, overall, user-friendly.