Infotech

OVERVIEW

Project scope: 4 weeks

Project type: Semester project (FEU1)

Role: Developer and designer

Tasks: Design, Develop

Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop, HTML/CSS, Bootstrap

Infotech AS is a construction company that wanted a new visual look of their website, and a new way to present their products.

Infotech was a school project for a real company!

THE TASK

The task for this project was to re-design and develop a website for Infotech AS. This meant creating a new visual identity based on their logo, and also design and develop a website that suits this new visual look.

PROCESS

To make this project, I had to start it of by creating the visual identity and design the website, and then develop it. The steps I did were as follows:

1. Design

COLORS

The colors used for this website was chosen with care. As the target audience of this website is construction workers, I chose a color palette with familiar constuction-colors. Orange is a color often seen on trucks, excavators, etc, and gray is a solid color that gives a feeling of durability and quality.

ICONS AND ILLUSTRATIONS

The icons for this project were designed using the colors of the palette. They have flat design as I thought that this would be better visually for the user. The circular shape of the icons was thought to symbolise tires at the construction site.

LAYOUT AND PROTOTYPE

To create a prototype and make design chpicec, I used Adobe XF. I tried to make the final product as similar to the design as possible as I find it easier to make website more visually pleasing if I have tested several designs before developing it.

2. Development

CODE

This project started out by using Flexbox. At the time, I could not make it work the way I wanted it to, so I traded it for Bootstrap (which is built on Flexbox). I used Bootstrap for the rest of the project. I learned a lot in a very short time using Bootstrap, and it gave me the sense of achievement in a very short period of time.