About perception-ux.com

The UX Website About Human Perception

This website is about human perception, associations and the nature of communication. However, the content is just a bonus. The main reason for this project is to showcase my UX and frontend skills. This website is written from scratch by the use of HTML, CSS and JavaScript. It shall showcase not only my coding skills but also my knowledge about human perception. Understanding perception is key to structure information in a mindful way. You can visit the website under www.perception-ux.com.

The challenges:

  • Write educational but entertaining content

  • + Build the entire website by HTML, CSS and Javascript

  • + Include animation with multiple items and events

Tools used:

The Approach

Challenge • Action • Results

Not only will I show you my way of working, but also give you insights into my way of  thinking.

I divided the PROCESS into 6 main sections.

1. Writing the concept

2. Writing the structure in HTML

3. Writing the layout in CSS

4. Adding interactivity with Javascript

5. Problem solving: The animation with CSS and Javascript

6. User, Code-Quality and Cross-Browser Testing

7. Final Version

In each section I will proceed as follows:

CHALLENGE
ACTION
RESULT

First, I will give you an overview of the CHALLENGES I had to face during the process.

After that, I will describe a selection of the ACTIONS I took to overcome the challenges,

  to finally let you in on the RESULTS of the actions.

This, however, is only an excerpt of a more extensive PROCESS the design went through.

1. Writing the concept

CHALLENGE

Before you can code any project, it is always good to have a sketch, template or prototype that provides orientation for the process. While they themselves can be the result of a Design Thinking process, I will not go into detail here, because this page is dedicated to the frontend process. The concept should include, a mobile first approach to the content and a general idea of the container, column and row (<div>) structure. So for the first step of the process we need to ask ourselves:

  • What is the content of the template/prototype?

  • How shall the content look like on mobile?

  • How shall the content look like on desktop?

  • What is the structure of the website?

Creating a template

Action

Mobile

Desktop

Cheatsheet for colours and the animation

Action

The blueprint

Results

Creating a template

  • Content for the website

  • Responsive concept with mobile first approach

  • Plan and point of orientation for the coding process

  • Blueprint to plan the div structure

Cheatsheet for colours and the animation

  • A document to fall back on for designing elements

  • Having an idea of scope for more advanced interactions

2. Writing the structure in HTML

CHALLENGE

After the concepting process, we need to set up a project folder to store our files in and link it to our Code Editor. I used Atom for writing code. Also it is a good idea to use software for the version control (GitHub Desktop) and make it available to team member (GitHub). After setting everything up, we can finally beginn to code the main structure of the website with HTML. Questions, we should keep in mind are:

  • How shall the project folder be structured?

  • What platform to use for version control and collaboration?

  • How does the content translate into elements?

Set up a project folder

Action

Writing HTML

Action

Laying the fundament

Results

Set up a project folder

  • Hierarchically structured project folder

  • Set up version control and collaboration platform

Writing HTML

  • Code of the website structure

  • Code of most of the website’s elements

3. Writing the layout in CSS

CHALLENGE

If we don’t want our page to look 20 years old, we need to add some styling to it. This can be done by linking a CSS stylesheet to the HTML files. This way we can set viewports, add typography, paddings, margins, display and position properties and even make the website a bit more interactive through transitions. These are just some of the things I have done via CSS. But what if, there are competing rules? Well, then the specifity of the selector always wins. Always? Sure? I have made a little CodePen example to help me understand the browser rendering the CSS sheet. This made me more aware of the importance to follow a certain CSS process. Check out the CodePen example below.

Questions that need clarification are:

  • What is a good process to apply CSS?

  • What CSS do we want to apply?

  • How can we make the website responsive?

A little experiment

Action

Writing CSS

Action

Responsive Design

Action

The looks

Results

A little experiment

  • Specific knowledge about the interdependencies of css rule sets

  • Deducted process corresponding to these rule sets

Writing CSS

  • Categorized css sections
  • Added typography
  • Added colours
  • Added properties like padding, margin, position and display and many more
  • Added interactivity through transitions

Responsive Design

  • Installed media queries for responsive design

4. Adding interactivity with Javascript

CHALLENGE

When we think about the accessibility of our navigation on a mobile device, we have to consider a drop down hamburger menu. But that solution demands for a little more interactivity, since we need our website to react to an occuring event (here: click on a button). Fortunatelly, we can achieve this by the scripting language Javascript, which enables us to manipulate all kinds of events.

  • How can we trigger a mobile drop down menu by demand?

  • How can we make CSS and Javascript work together?

Mobile Navigation

Action

Accessible Navigation

Results

Mobile Navigation

  • Mobile navigation on demand with responsive properties
  • Drop down menu custom styled for accessibility

5. Problem solving: The animation with CSS and Javascript

CHALLENGE

Working with Javascript with Javascript not always turns out to be effortless. In the following I will give you insights into my code problem solving. For the animation on the association subsite, I had to develope my very own solution, combining two solutions from stack overflow and tweak them a little. But first I had to break down the problem subproblems. In the next section I will go through the 4 steps I took to solve my problems, leading to a working self-resetting multievent animation that can be triggered by a button.

  • How to trigger a multievent CSS animation with a button?

  • How to reset the ended animation automatically?

Setting up the CSS animation

Action

Play animation on a click

Action

Reload the animation

Action

Disable button

Action

Fun animation with good UX

Results

Setting up the CSS animation

  • CSS multievent animation

Play animation on a click

  • Animation not running by page load
  • Button click triggered animation

Reload the animation

  • Reload triggered after animation ended (’setTimout()‘)
  • Reinserted ‚paused‘ state of animation

Disable button

  • Disabled button while animation is running
  • No animation events overlay
  • Good UX by taking user behaviour into account
  • Good UX by adapted button UI

6. User, Code-Quality and Cross-Browser Testing

CHALLENGE

This is the last step of the first iteration. Now, we want to get some user insights for future iterations. Since this project is about my frontend skills, I kept this section concise. If you want to learn more about User Testing and documentation ckeck out this link: Documentation of a User Test. After the user test and minor adjustments to the website, we need to make sure that the website is working well in all main browsers on the market and that there are no issues with the code quality of our work.

  • What can we improve in future versions?

  • Does the code work in all browsers?

  • How to improve the code quality?

User Testing

Action

Code Quality & Cross-Browser Testing

Action

Final Adjustments

Results

User Testing

  • Improved animation with setTimout() automation
  • Rephrased Call To Action(CTA)

Code Quality & Cross-Browser Testing

  • Tested and assured cross-browser functionality
  • High code quality through linter validation

7. Final Version

The Website

This is the moment you have all been waiting for. The final website.

„Design is never finished, only abandonned“

Let’s Work Together

TELL ME MORE ABOUT YOUR PROJECT
Let’s talk