Red PlanetRed Planet
C
o
r
p
o
r
a
t
e
W
e
b
s
i
t
e

Scroll to continue

Story Behind

We were asked by uprising revenue growth agency to develop a creative corporate website. Usually, we do not take the works on corporate websites. However, client’s professionalism and dedication to the work has brought our interest, as well as the intense use of AngularJS and rich animations inside the project.

Red Planet itself drives corporate and startup revenue growth by combining startup inventiveness, speed and disruption with corporate resources, distribution and brand power to create new digital solutions. Recently the company has been acquired by Deloitte. And we were happy to take part in their uprise.

/0
D
e
v
H
o
u
r
s

/WEB
D
e
v
P
l
a
t
f
o
r
m
s

02use cases

Mobile View

The client chose a landscape orientation of tiles and it definitely works well for tablets and desktops. With a smartphone, however, landscape mode for the tiles looked too small. Therefore, for mobile devices, it was decided to change tile shape to portrait. Additionally the support of portrait orientation was added to tablets.

iphone
iphone
iphone

03use cases

Extensive
Admin Panel

Basically, our client wanted the ability to change any tile on the website including Main Menu Bar. Therefore, we extended administrative access to all the tiles of the website, so the client could add new tiles to the existing sections or even create a new section if needed.

When adding a new tile, the editing process is visualized by a number of steps:
1. Choose whether you are creating a Main Menu tile or a Content tile;
2. For the Main Menu tile, admin can modify only 3 elements: Title, Background and Font Colors;
3. For the Content tile, admin has more options to choose from: Text/Form, Media/Video, Gallery or Blog Post.

We tried to keep the same sense of motion in the admin panel as on the frontend side. That is why we added the drag and drop feature in order to allow website’s admin create new tiles and seamlessly move them to a different position on the grid if so desired.

ipad

Technologies

AWS EC2

PHP 5.4

Yii2

- Bootstrap- SwiftMailer- Transliterator

WebServer

Apache2
AWS RDS
MySQL 5.6
Frontend

HTML

- TintMCE- Ionicons

CSS

- Bootstrap

JS

- jQuery- jQuery UI- Moment.js- Underscore.js

Design

We couldn't boast the designs since they were provided by the client, but we liked them so much back then. Therefore, we transferred designs pixel-to-pixel, respecting all the indents and guidelines as they were provided by the Red Planet team.

Frankly speaking, we are very proud of bringing those designs to life. Even after so many years passed, the website still looks stylish and innovative.

Focus Point

The focus point is a kind of a “window” onto the grid. It is fixed in the center of the screen where the selected tile is presented with 100% opacity. At the same time, parts of the neighboring tile are visible too, but they are faded out to the opacity of 50%.

In addition to opacity ‘trick’, background remains still during navigating, this amplifies the focus point additionally.

Sidebar

This side menu bar is represented by the universal menu symbol, which is ironically also the symbol of Red Planet. This section is mainly made to provide ease of use to recurring visitors. For instance, 70% of visitors usually use the standard menu button to get to the Contacts section.

Red Planet

color scheme

planet

R:170  G:39  B:47

hex: aa272f

planet

R:30  G:30  B:30

hex: 1e1e1e

planet

R:87  G:86  B:86

hex: 575656

planet

R:179  G:178  B:178

hex: b3b2b2

Features

/
A
d
v
a
n
c
e
d
A
d
m
i
n
P
a
n
e
l
/
I
n
t
e
n
s
e
U
s
e
o
f
A
n
g
u
l
a
r
J
S
/
S
e
a
m
l
e
s
s
W
e
b
s
i
t
e
S
t
r
u
c
t
u
r
e

you have an idea?