Osis

Brand & Website Design

Osis is a French IT service company specializing in open sources technologies. I designed their brand and website with the aim of promoting the company's work and helping them gain more exposure in the marketplace.

in_browser
01
Concept

Define the Brief

The first thing I did for this project was to determine what exactly the project goals were.

What is the purpose of the project? What problems am I trying to solve? I wrote this out in a document called The Brief. The goals of the project were to create an online profile to promote the company's work and obtain more exposure. It needed to show what type of services it offered, display past or ongoing work, and have a way for people to contact the company easily. At this point, I simply figured out the ultimate goal of the project. I recorded these and referred back to them in later stages of the project to ensure that it was on the right track.

Research and idea generation

After the project’s goals had been decided upon, and before beginning the design, I spent some time doing research.

I usually start by identifying the company's top five competitors. How do they emphasize their value proposition? How do their prices compare? Answering these questions helps in creating a brand that will have a better chance of being successful. Once I roughly establish a direction as to where the brand should go, I conducted more research, but this time aimed at generating creative ideas. Sometimes I might look at other sites for inspiration, but sometimes not looking at what other designers have done is best.

Instead, I like to brainstorm my own solutions to the problem at hand. All is needed at this stage is a pen, a sketchbook, and my thoughts.

img-project-center
img-project-center
02
Design

Designing the Brand

The brand of a company is basically the visual language that describes it and that determines how others see it.

According to the brief, the brand image needed to convey a strong memorable look and feel. The client wanted to use a white bear as the brand mascot for it strong and wild image, that was fitting a certain idea of Open source. With that idea in mind I started by looking for all sorts of white bear images for inspiration and end up selecting a few as my guide. I them sketched some ideas and experimented with typography and letter arrangement before deciding on the final logo (which I drew in Adobe Illustrator).

img-project-center
img-project-center
img-project-center

img-project-center

A sketch of the website's content hierarchy.

Thinking about content

When designing a website, one of the first things that needs to be decided upon is the content, because for most projects this will determine the design.

What information needs to be conveyed to the visitors? Should a given point be written as simple text, or would it make more sense as an image or a diagram? At this point in the project, I needed to think about the message and how to convey it. Therefore, I asked the client to provide me with the content early on and wrote a draft, which I broke down into six main parts: home page introduction, services description, projects, a partners list, and the company's contact details.

Wireframe

From the content gathered earlier, it was clear that the client wanted a brochure website that outlined their services and provided potential customers with an easy way to contact them.

I decided to go with a simple one-page website broken into five sections, as seen in the sitemap above. Clicking on a link in the top navigation bar would slide the user down to the appropriate section of the page. I sketched out wireframes for each section of the site to block out the basic elements and to give me some blueprints to work from.

The approach I take to wireframes is simple but effective, and all I need at this stage is a pen and sketchbook. I first list all of the elements to include on a web page. I then group related elements, before prioritizing these groups according to importance. Once the page's elements are grouped and prioritized, arranging them on the page is much easier. More important elements are placed towards the top of the page, and white space is used to create groupings.

img-project-center

A sketch of the website's content hierarchy.

img-project-center

A block out of the site's basic elements

High quality mock-up in Photoshop

Once the desktop wireframes were sketched, I moved into Photoshop and started a mock-up of the website in more detail.

Because this project was a one-page website, I designed all of the five different sections using Photoshop, but usually I try to not spend much time in this program as it slows down the development process. Instead, I simply mock-up the main page templates, along with any other design elements and assets that will be needed. Similarly, I did not mock-up any mobile or tablet designs in Photoshop, because I find that simply coding these based on the wireframes to be quicker.

img-project-center