Category Archives: Project

Environment Pages – Initial Design and Markup considerations

The Environment pages on the website are perhaps the most important pages to the project. They host a large percentage of the “cool” and cutting-edge technology that we are aiming to showcase.

This environment pages are going to showcase:

  • The 3D Environment Model in different views - 360 degrees, top, side, live (timelapse) view
  • The different ways of interacting with it - Webcam gestures and keyboard etc.
  • Information about the environment - Graphs or textual information.

We also decided that these pages should probably look relatively different to the other areas of the website. For example, the homepage, which is going to be a more traditional looking webpage. The environment pages are going to look more like an interface, with many buttons, data and different ways of interacting with it.

Based on what we decided the purpose of the environment pages were I set about designing it. I started with the desktop full-width design as I felt this was easier to visual as an interface style design. I chose to make the max-width 1400px which was 200px more than the maximum width on the rest of the website as it would set it apart from the rest of the website and make it look more like a bespoke interface for the environment. However, whilst making it stand apart from the other areas of the website I didn’t want it to look like a completely different website. So I made sure I fulfilled our look and feel decisions of a flat UI style.

This was the result of a few hours designing and feedback from James and Joe:

environment-page-design

Now that we had a base design for the page in desktop, the next challenge was to think about how to design this for mobile first.

We drew some sketches of how the mobile layout could look, removing pieces of the desktop design that we felt were not completely necessary or may have affected performance on mobile more than was justifiable.

mobile-sketch copy

Once we had decided on how we wanted the mobile layout to look we thought about how we were going to organise the HTML markup of the page into a hierarchical structure. Starting by numbering the importance of certain parts of the page, with the lowest being most important and the highest being the least important.

environment-page-design-heirarchy

This would then translate into how the HTML markup would be written, features of the design that are removed in mobile would be at the bottom of the markup and parts that were there throughout the page from mobile to desktop would be at the top of the markup. Whilst also taking into account how elements have to be re-positioned and moved from one CSS breakpoint to another using CSS but without the ability to re-order any HTML markup.

Some of the early HTML markup for the environment page:

html

GitHub and kanban workflow

Github

We are using a popular Github workflow for our project.

The master branch should always be clean, bug free and ready for deployment.

Any new code should be written in branches which can be code reviewed and merged. This reduces conflicts and increases visibility to other developers.

Either immediately or soon after a new branch has been created, a Pull Request (PR) in Github should be created outlining the required tasks for the completion of that piece of work. PRs are very useful for code review as other developers can leave line-by-line comments on other developers’ code.

Once the PR is ready, it is merged back into the master branch, at which point the code is deployed to the live environment. Essentially this means that the master branch should exactly match the live environment.

Each time a new piece of work is required, a new branch is created and the process starts again.

Kanban

Here is our Kanban board:

Kanban board

Kanban board

There are four major columns on our Kanban board:

  • Backlog
  • Work In Progress (WIP)
  • Ready/Test
  • Done

Each yellow post-it note represents a single task.

The backlog is where we place tasks which will are ready to be picked  up.

When a task is picked up and is being worked on, it moves to the WIP column.

When a task is complete, it is moved to the Ready/Test column. At this stage, we will review the task together to ensure that it works and is of high quality. Code-wise, this would be the PR code review stage.

Once the task is merged (code), and/or reviewed, it can be moved to the Done column.

What is Cell? The idea and concept for our project.

Cell Industries is a fictitious company set in the future that we have invented. It gives us the platform to produce a website which shows off the latest web technologies and ways of interacting with the web.

Secure a more familiar future

We at Cell Industries empower you to preserve the future of your planet. Using our groundbreaking QuantumCell™ technology we can clone your environment leaving it protected and ready to be restored in the event of undesirable occurrences.

Upon completion of this project we aim to have produced a website that uses these technologies:

  • HTML5 / CSS3 / Javascript / PHP
  • WebGL
  • WebRTC
  • Augmented Reality

Whilst also using:

  • Clean and flat UI design
  • Grid system
  • Using CSS3 to create design elements when possible
  • Standard web imagery – icons etc.
  • Responsive wireframing – designed for large and small screens

For a more in depth description of the project and what we aim to achieve please view our proposal presentation.