The making of the Ticker Invest website

Overview• Process

Exploring the subject area and realizing that many companies use trivial investment metaphors in their promotional materials.

tickerinvest process 1

Deciding to develop a concept in which the client simply won’t need to add photographs to the website. It has to be a self-sufficient style that would be stable enough without the use of photos. We get the idea to create patterns based on repeating color lines. The lines resemble graphs, patterns on banknotes and stock certificates and perfectly rhyme with the company’s logo.

tickerinvest process 2

Changing the shape and color of lines allows to easily extend the pattern to support any number of products.

tickerinvest process 3

The same concept can also be applied to stock charts.

tickerinvest process 4

Additionally, the patterns create interesting effects when they overlap.

tickerinvest process 5
tickerinvest process 6

Creating a nice hover effect for the product button.

tickerinvest process 7

Drawing main pages of the concept.

tickerinvest process 8
tickerinvest process 9
tickerinvest process 10

Presenting the concept as a prototype and supporting it with a video that provides additional information about the style.

The client approves the concept. Starting detailed drawing and choosing pattern colors.

Taking simple patterns with alternating lines as a basis. Lines are of the same thickness as gaps between them.

tickerinvest process 11 1

Adding a perspective to create patterns.

tickerinvest process 11 2

Applying the perspective to complex lines and looking at the patterns play. Overlapping with no perspective (on the right) does not generate the same effect.

tickerinvest process 11 3

Curved lines look even more interesting.

tickerinvest process 11 4

Drawing curves for all products and creating derivative patterns. Adding primary colors as well as additional ones for the hover effect.

tickerinvest process 11 5

Trying to make sure the patterns reflect the nature of the products, simplifying if necessary.

tickerinvest process 11 6 new

Starting to work on the website’s internal pages. We want to come up with an exciting effect that would make visitors play with it. Maybe reveal the header in some interesting way?

We get the idea to hide the header behind a blinds-like effect. Using guilloches for inspiration. Taking the idea to the technologist and putting together a prototype in 10 minutes.

tickerinvest process 12

The result looks cool. Deciding to hide application and contact forms in the same way.

Starting to typeset the rest of the pages. Typeset in Mirta typeface, the text block resembles a page of a printed edition, begging for some sort of a classic feature. Adding a dropped capital. Typesetting the lead in two columns to make the layout more interesting.

tickerinvest process 13

Starting to work on comments. We need to make sure the page is interesting to read and look at. Deciding to go with a dark background. The color of the header on this page matches the color of the background, so we won’t be hiding it. But we still want to add something interesting. Adding a pattern-inspired shadow to the dropped capital.

tickerinvest process 14

The application button comes out to be large, round and beautiful. Changing the application form to match.

tickerinvest process 15

Adjusting the search results page to be in line with other pages.

tickerinvest process 16

Making a bold decision to show large currency symbols on the bank details page. The symbols gleam when the page is scrolled, definitely worth having a look!

tickerinvest process 17

Drawing a strict 404 error page.

tickerinvest process 19

Adding central alignment on error pages to make sure they match the rest of the website.

Adjusting pattern colors.

tickerinvest process 20

Changing the mechanics of the main page.

tickerinvest process 21

Fixing bugs and launching the website.