Hex Web UX Development

The technologies listed here have only become available (i.e. supported by web browsers) in around 2012. In our collective (Hex) humble opinion, these are some of the most important new technologies available and any website developed today should consider using them.

Explaining "Responsive Design"

Since the rapid uptake of mobile devices worldwide, an abundance of additional screen sizes need to be catered for in order to maintain a user-friendly website. "Responsive" web programming provides an optimal interactive experience, i.e. easy reading and navigation with a minimum of resizing, panning, and scrolling - regardless of the device. Screen sizes vary greatly across a wide range of devices, from mobile phones to tablets (e.g. iPads, Galaxy tabs) to desktop computer monitors and even larger smart TVs.

Hex Web UX Design and Development
Front-End Design for Abalimi Harvest of Hope.

Making a website responsive means that each page will automatically change it's layout according to the size and orientation of the device through which it is being seen and interacted.

Making websites responsive will also simultaneously lay the foundation for the future development of mobile apps via website to mobile app conversion systems such Cordova.

Effortless Website Navigation

On any website or mobile app for that matter, an easy to use "Navigation System" (or menu) is essential to every page. Menus should be consistent to every page so that website (and intranet) visitors feel comfortable browsing around or confident that they can find what they are looking for quickly.

Travel Africa Website Design
Website design for Perfectafrica.org.

Navigation systems should be responsive and also use the organisation's symbol set (i.e. fonts) consistently in order to help the user feel more at ease when navigating. The navigation system also needs to prevent users from accessing private areas where privileged content is displayed.

Privileged content is instead accessible to certain users through a log-in recognition system, whereby they have more "rights" and accessibility on the website.

Hex Website Design and Development
Website design for Simasonke.

Incorporating a "Vector Symbol Set"

A "vector symbol set" is basically a set of graphical elements encoded into a special "Font" file which enables your website to produce high-quality, fast downloading, dynamic and scalable graphics which would both help the person navigating the website to find their way around more easily as well as define the "Look-and-Feel" of the website itself.

Hex Website Design and Development
Website design for Artvark Art Gallery.

The creation of a vector-based symbol set for the website and/or intranet (equivalent to a normal Font file) has a number of advantages including :

  1. Ease of use and re-use of important symbols and diagrams, including the organisation's logo.
  2. End-User Control : Unlike regular "bitmap" images, the symbols / icons / diagrams in this format can be resized, animated or made into different colours by the user without the need for an image editing program. Basically, you get the "image" aesthetics with usual functionality of text.
  3. Consistency : Having a defined set of icons can be instrumental in developing a consistent brand identity across the entire web and mobile platform in addition to consistency with print and other media. Developing with consistency in mind makes for a more solid, trustworthy design and more intuitive user experience. The organisation's official fonts can also be installed along with the precise colours stipulated in the organisation's brand identity.
  4. Compatibility : Having a vector-based symbol set for the organisation's digital systems also solves the problem posed by new devices, such as Apple or Samsung's retina screens which display at resolution's higher than the standard 72 dots per inch (DPI). The trouble is that, when a person is viewing on a screen above 72 DPI, normal images start to become blurry and pixelated. When viewed on screens higher that 72 DPI, unless specifically catered for by perhaps loading a high resolution image beforehand, the website can be completely spoilt. A vector-based symbol set does not suffer from this issue at all.

Vectors, by their nature, can be scaled to any size without any loss of quality whatsoever.

Hex Website Design and Development
Front-End design for PETCO.

The Hex UX Design Process

Step 1 : Content Processing

Content collection, examination, creation, prioritisation and reformatting to web standards.

Our first concern is to collect all content from all of the possible various sources in order to create an accessible and centralised "content library" :

  1. Examine all available existing content (e.g. logo or logos, icons, banners, photos or stock photography, etc)
  2. Examine content on existing website(s); capture any text or other files that might be re-used in new website
  3. Examine specific requirements as per brief and other points from meeting(s)
  4. Where not done so already, convert content to web-standard formats (e.g. from PDF to PNG)
Hex Website Design and Development
Website design for TOPIC.

Step 2 : Front-End Design

Choose various responsive layout options and sculpt a unique design from the most essential, significant and potent content.

Bearing in mind the desired "look & feel" specified in the brief, examples of existing websites which point towards the desired design - as well as the items within the content library, the next step is to evaluate a variety of responsive layout options and build the actual fron-end interface :

  1. Determine suitable layout style(s)
  2. Upload layout styles to a ("live" - but not publically accessible) test server where your team can see the design process in real time from anywhere and on any device
  3. Edit all of the most desirable, relevant or applicable content items in such a way as to re-structure the layout from content items which best reflect the your branding
  4. Adapt the responsive layout incrementally using a selection of the most desirable content until the optimal front-end design is decided upon

Technologies used (all industry-standard and open source) : Languages : HTML5, CSS3, Javascript.

Hex Website Design and Development
Website design for PETCO.

Step 3 : The Back-end programming and database setup

  1. Set up MySQL database, populate with tables for content, pages, people, user accounts, transactions (etc.)
  2. Set up default content in MySQL database
  3. Integrate front-end design into the back-end drag & drop content management system using components created in Step 1
  4. Create pages and menu items according to the sitemap supplied
  5. Populate pages with components created in Step 1 using drag & drop
  6. Customise member's portal where specific people can edit their basic contact information, access restricted documents, etc

Technologies used (all industry-standard and open source) : Languages : HTML5, CSS3, Javascript.

Hex Website Design and Development
Front-End design for Nutritionist.co.za.
Hex Website Design and Development
Front-End design for Abalimi.

To find out more about Hex design and content creation service hello@hexcompany.com.