"It's not UX vs UI. Its UX and UI"

The User Experience (UX) should be enhanced by how the User interfaces (UI) with design elements.

And now here's a list ...

  • The website needed a better search option baked into the header.
  • Header navigation is three-levels deep, with no apparent use for the topmost bar ( time, date is too generic ) as this is information you can easily get from the menu bar on any OS. Instead why not present this information in a fun way?
  • Option to select atolls was not thought out well, and led to confusion.*
  • The website did use a vertical grid, however less effort was made to make content horizontally visible.
  • Content 'jumped' around pages, with no clear navigation 'cues'.
  • Events, activities and visual-exploration* elements were missing.
  • A 'mixed-cards' plus full-length visual system was used for media but these weren't ordered in sections made 'visible' when a blur-test* was applied.
  • 'Heatmap' considerations weren't followed ( 'F' and 'Z' shape content placement). *
  • Color themes didn't complement the website across different sections.
  • Fonts weren't multi-platform and device friendly.
  • Whitespace and baseline rules weren't followed.
  • Styling elements (CSS) such as icons and fonts failed on many levels*.
  • Images weren't color-corrected for contrast.
  • There were multiple galleries but the key focal point was lost on the first page (interactive gallery, which came below header). It would have been better to make the interactive gallery the first focal point.
  • Re-iterating multiple galleries, on the same page, with the same content.
  • The gallery on the footer takes you away from the page instead of opening in a new tab or window.
  • Too many repetitive visual navigation elements, which could have easily been placed inside media containers (eg: mouse over photos to show which section article belongs to).
  • Lack of order to draw the user into a sense of balance on the website.*
  • The website lacked 'exciting' content placement and focused otherwise on 'standard' content.
  • Too much emphasis was placed on the footer, whereas it could have been designed as a pleasant farewell, where content needed not trickle down from other areas.

Those were measurable focal points which we evaluated on Optional points marked by a ' * ' would be explained through design guides as the document progresses. When evaluating how design could be improved on we looked at best practices in both UX (user-experience) and UI (user-interfaces). These included and were not limited to implementation, flow and context. Grids and content placement is key to moving the eye along an uncluttered and useful website. In other words UX is the abstract feeling you get from using the website. UI is what people interact with. We focused on both measures when deciding whether the user would enjoy information on the website. Before our recommendation though, here are some basics...

How are core site functions defined?

Input and Output defines how the user interacts with the site

Navigation guides the user on the website

Content, Information should enable the user easy access and enjoyment

Sharing should allow the user a multitude of options to share and promote the website on different mediums

New options and directives for sharing should be evaluated before they are used. They otherwise end up slowing down the experience rather than enhancing it.

PROBLEM-A . The website needed a better search option baked into the header. Going through our list of recommendations for we noticed that special consideration should still be given to search content and an improved navigation should be introduced otherwise. We also noticed that search was initially flawed on the website. And rather than build to an exciting conclusion it took the visitor to an unresolved place. We imagined that searching the website should have been both delightful and fun. These are our recommendations for improving the website, starting first with the search function.

Our old friend has sailed again: If only we could play a game with this boat, the way we could with the chrome dinosaur.
If it's not interactive it's not fun.

A search bar should offer single-field or drop down plus options and recommendations in case search didn't yield results. This allows for a more personalized engagement on the get-go making sure that visitors are redirected to relevant content.

On the web page this would mean that visitors would pick and choose options to suit their needs from the very first engagement.
Suggestions make sure that relevant content was present on the website, creating a more helpful and friendly experience on mobile. This also allows mobile users a simpler field to interact with when screen-space gets in the way of placing optional components for search.

The search element could also be a sidebar focal, without having to take up the main header space.

After placing content on a grid, the searchable sections can then either be a form, or a selection of options. As shown in this swiss destination website. Notice that 'red' also takes precedence here. But only for sections that the site will have helpful content to.

TO REDESIGN PROBLEM-A . Take a broader look at what the website will achieve. The best way to evaluate where users would interact most with the website is to start with a wireframe of the visible header. Keeping in mind that this would probably involve the search function we can then design around that. It's better to engage the visitor first through a message and the website header would be the best place to do this. If the purpose of the website is to provide information to visitors first and foremost without pushing 'blocks' of content in their face; then the header should be central to allow for a cleaner look.

There's enough space here on the header to really let my imagination wander. The 'red' icons feel like they could be helpful, but they hardly get in the way of me exploring.
There's much more than meets the eye with that menu button. You can really start engaging visitors without much distraction as a new layer is presented over the header. The whole process feels a lot more natural when you know that the underlying system is well thought out.

Here are a few more examples of creating engagement with that header space.

This animated header takes steps to make sure that the visitor will take time to appreciate information provided on what's going on and at the same time take everything in at a glance.

The elements on the website should feel consistent. A single function should work the same way throughout the website and also have the same visual look. This anchors the user as they progress. If there is a doubt as to how something works, explain what this function does, through helpful tooltips.

PROBLEM-B. Option to select atolls was not thought out well, and led to confusion. We should realize that new visitors would be at a loss to make a decision based on first choices. We should make this experience as painless as possible. Random selection of atolls led often to dummy content. The website should have then aimed to create a sense of 'comfort' with better visual selections.

TO REDESIGN PROBLEM-B. Since North Male would be the main focus of travelers to Maldives, why not provide more information to them? This could easily be achieved with a map and relevant content.

This placement on areas of interest provides visitors with immediate access to information, both visually and otherwise.
A cleaner option which could be explored. Visual data helps remove clutter.

PROBLEM-C. Several enhancements were needed to make the website appear less cluttered. Most of the problems could have been solved simply by introducing some 'quiet' space.

Lack of spaces, misaligned content and misjudged contrast on typefaces and icons makes this page painful to look at.

The website did use a vertical grid, however less effort was made to make content horizontally visible. A website is also a form of visual art. We should understand that visual order and hierarchy helps people get a sense of their surroundings. More than being creative we should consider subtle elements like composition type and color. Any content can be improved by knowing what to leave out. This is why the print and publishing medium is still held at such a high regard. Because in-spite of access to the best technologies, print and visual art mediums still hold true. Even on the web...

to create spacial awareness we should always ask ourselves ...

What is this? How do I use it? Why should we care? We should be informing users, we should be communicating content relationships and we should be trying to create emotional impact. For content heavy websites this means that we should consider how a reader scans books.

'Heatmap' considerations weren't followed ( 'F' and 'Z' shape content placement). *

When a reader scans content heavy websites they are following a 'F' pattern. When content heavy websites don't consider white-space and bundle content together, they are failing to consider that the human eye naturally behaves this way as it scans text.

speckyboy is a happy place with lots of visual space and surprise deals. Of course one knows this by a simple glance at their home page.

Sections work well when the visitor can expect certain information to be met immediately without having to browse and click links all over the place. A good way to do so would be to engage the user with what's exciting about Maldives as a destination. Where information could be presented in layers depending on activities that they could do and places to explore. Design of these sections can then stay uniform across the website giving the visitor a more aesthetically and visually pleasing product to interact with. Event, activities and visual exploration is tackled very well in

One presents a photographic journey while the other creates the same effect using artistic color use.

Learn more at a glance
An exciting call to 'action' with these colors

Take a 5-min break here before going ahead. You deserve it.

We will discuss a general solution on how to create 'space' after this...


Color themes, Fonts, Styling, Images, Galleries and footers.

When trying to get something done it's always best to form a committee. Two or three people should define the 'new' look of the website and most of time two will be absent. The team should make mood-boards and take into account new actions on the website. They should also look at a lot of examples on good design and styling use. We will try to address 'balance' on the website step by step.

When a blur-test is applied, the elements that stand out the most, will probably be where attention would most matter. Bright colors tend to make more impact then cool colors.

Attention is on the header.
Using a warm line here takes the attention away from everything-else. The human eye is naturally drawn to order. And that line is it.

* Avoid using warm colors for horizontal space lines. Instead use them sparingly on buttons and call to action texts.

Cool colors where space is needed helps put the mind at ease, while warm colors on call-to-action places creates a sense of excitement.
Create proper space with correct style levels for text.

* Text for headings should remain between 18 -29px while body text should always remain between 12-14px

Captions and header direct the visitor and inform them on what to expect.

Space is an absolute and unconditional friend, when you are creating websites. A styling guide thought out in this manner would not only make sure that things stay in a 'pattern', it would also help create order. We should try to remember that an important trick to make something pretty, there should sometimes be an absence of something pretty.

Pretty logos yes, but not enough space to work with.

* Create a style-guide for all the components that will go into the website.

There was really no need for this information to be seen, and therefore it could have been avoided completely. A style-guide will help visualize and think about these elements before they are applied.
Layouts will help visualize actions on the website before you implement them.

Once a visual guide is in place we could then proceed with taking clearer design decisions.

*Place action and sharing links inside content rather than below them. This is the simplest way to reduce clutter.

Creating CSS rules and placing sharing links inside containers.

*Prioritize legibility, use grids.

Get rid of illegible content. Here, text contrast and sizes don't help at all.

Make as many grids as you want, in the end you'll figure out which ones work and which don't. The process needs to be drawn at this point.

Grids help visualize open spaces.
In visualizing negative space, you get more freedom to place content where you want.
Space also helps create a sense of actions when colors come into play

In the end creating a wireframe first and foremost is about creating balance.

explore and understand colors.

* Create and test visual hierarchy through color, shapes and content placement.

Understand contrast by thinking about how it applies to content.
Colors can also create a combination of action guides and help visitors get a sense of those patterns, throughout the website.

Contrast also helps create a sense of artistry using both type and illustrated elements.

This component uses contrast and colors to place action elements inside the container. And that in turn keeps the visitor engaged.
Type can also help create contrast and make an identity for the website. These can be used to make special features appear 'extra special'
galleries can be made visually appealing by taking a different approach to making photos appear in different sizes within gallery containers
Calls to action can then come inside gallery containers

In the end thinking about design really matters, since that's where User experience is most enhanced.

We'll conclude with some good designs for inspiration.

Thank you!

Created By
shaukath mohamed


Created with images by © Ahmed Amir - "Just one from all the gems" • Peggy_Marco - "sea boot seychelles" • Find-cat - "heron sea nature" • da1374 - "palma maldives beach" • SusannWeiss - "maldives woman on swing swing" • Alessandro Caproni - "Sunset"

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.