15
CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAU Development Sparkle Design

CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

CREATING A SITEFOR ARCHITECTURALCONSTRUCTIONBUREAU

DevelopmentSparkle Design

Page 2: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

TA

SK

To create a corporate website for the Turkish

Bureau. To image the style and approach

to architectural design.

02 www.sparkledesign.com

Page 3: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

RO

TO

TY

PE

S

We've created the basis

of the future project —

10 prototypes

We've created a verified

display system

We've worked out

the project structure

03 www.sparkledesign.com

Page 4: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

MA

IN P

AG

E

The first page is designed as a video landing

page. The page is divided into 2 parts with ani-

mated slide blocks and a transition between

them. We've сompleted video production.

VIDEO

ANIMATED TR ANS IT ION BETWEEN

S ECT IONS

ADAPTIVE G R EEN F IELD S IZE

HIG HL IG HTED CAPITAL LETTER

YOU CAN IMMEDIATELY G O TO

THE PAG E OF A PAR T ICULAR

S ERVICE

Slider Landing.Video and service blocks.

04 www.sparkledesign.com

Page 5: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

In the additional menu, we placed the full list

of pages and thought out the interface. Brought

the most important to the top menu.

Additional menuand pre-loader

WE'VE BR OUG HT A PAR T OF THE MAIN

PAG ES R IG HT TO THE MENU

EXTR A MENU

S OCIAL NETWOR K BUTTONS

PR E-LOAD PAG E

R UNNING BOOT L INE

05 www.sparkledesign.com

MA

IN P

AG

E

Page 6: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

TH

E S

ER

VIC

ES

SE

CT

ION

We show what services the company

performs.

The "Services" sectionand "Services" page

A PAG E OF S ERVICES , WHICH S EG MENT

THEM BY S ECT IONS

ADAPTIVE G R EEN F IELD S IZE

ANIMATION OF THE CAPITAL LETTER

VIS UAL ILLUSTR ATION OF THE S ERVICE

DETAILED DES CR IPT ION OF THE BLOCK

06 www.sparkledesign.com

Page 7: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

PR

OJE

CT

S S

EC

TIO

N

We show the realized projects

of the company.

VIV ID PHOTOS

ANIMATION OF UNITS

F IXED TOP MENU AR R ANG EMENT

07 www.sparkledesign.com

Page 8: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

PR

OJE

CT

PA

GE The project page allows seeing a basic photo

of the object, its description, more detailed in-

formation, stages and the result of the work,

as well as important information on the object.

ANIMATED PHOTO

S HOR T DES CR IPT ION

S L IDER "PHOTOS BEF OR E AND

AF TER "

INF OR MATION ON THE OBJECT

08 www.sparkledesign.com

Page 9: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

PU

BL

ICA

TIO

NS

SE

CT

ION

Allows notifying users about important

events within the company.

HOVER CHANG ES THE F OR MAT AND COLOR

OF THE BACKG R OUND

NEWS PAG E

09 www.sparkledesign.com

Page 10: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

CO

NTA

CT

S &

AB

OU

T U

S S

EC

TIO

N

Made in a clear form and in the uniform

style.

LOCATION MAP

F EEDBACK F OR M

MISS ION AND G OALS OF WOR K

10 www.sparkledesign.com

Page 11: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

AD

MIN

IST

RA

TIV

E P

AN

EL

Managesite elements

COMPLETE AND EASY S ITE MANAG EMENT

INTUIT IVE INTER FACE

EDIT ING ANY F IELDS AND VALUES

ON THE S ITE

11 www.sparkledesign.com

Page 12: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

12 www.sparkledesign.com

RE

SU

LT

W E ' V E D I S P L AY E D C O R P O R A T E

S Y M B O L S O N T H E S I T E

W E ' V E S H O W N S E R V I C E S A N D P R O J E C T S

O F T H E C O M P A N Y T O A D VA N T A G E

W E ' V E R A I S E D B R A N D A W A R E N E S S

Page 13: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

13 www.sparkledesign.com

WE

BA

WA

RD

S

Nominee in the category"Foreign Sites"

The project is nominated for a prestigious

award WebAwards.

Page 14: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

CO

NTA

CT

S

IF YOU HAVE ANY QUERIES, PLEASE DO NOT HESITATETO CONTACT US IN THE WAYCONVENIENT FOR YOU.

+380 (50) 381 69 04

[email protected]

Page 15: CREATING A SITE FOR ARCHITECTURAL CONSTRUCTION BUREAUdbms.in/pdf/case_gulab_en.pdf · The first page is designed as a video landing page. The page is divided into 2 parts with ani-mated

THANK YOUFOR WATCHING!

www.sparkledesign.com