CSS RE-DESIGN PROJECT

Designer: Marina Georgieva April 2015

Project website:

www.css.otom-ltd.com

BASIC CONCEPTS OF CSS RE-DESIGN

CSS re-design is changing

the visual appearance of an

existing website only by

modification of the

original CSS code.

During this process the

designer does not make

any changes to the HTML

file except for adding a link

to the new CSS file.

The re-design process is

very labor-intensive,

especially if the original

CSS code is developed by

another designer.

THE ORIGINAL CSS CODE

The original website (CSS code

available to the right) is located at

the following web address:

http://templated.co/earthyblue

It is a dummy homepage that is

developed for CSS re-design

student practice.

The download package includes the

HTML and the CSS files as well as

the images used in the original

design.

The goal of the project is to achieve

completely different appearance

and a new aesthetically pleasing

design only by re-writing the CSS

code.

THE ORIGINAL WEBSITE

URL

http://templated.co/

earthyblue

This is a screenshot

of the original

website before the

CSS re-design.

The color scheme, the

graphic elements and

its overall appearance

look very simple

without any specific

emphasis on

particular elements.

THE RE-DESIGNED CSS CODE

The re-designed CSS code is

presented on the right. Although

this is a very small excerpt, the

numerous differences from the

original code immediately stand

out.

The re-designed page is located at

the following address:

www.css.otom-ltd.com

Due to these multiple changes in

the CSS file, the website obtained

an entirely different appearance.

The only changes made to the

HTML file are the link to the new

CSS file and the title Metro

Architects, instead of Earthy Blue.

THE RE-DESIGNED WEBSITE

URL

www.css.otom-

ltd.com

The new design looks

more attractive and

aesthetically

pleasing. The

jumbotron creates

identity and unique,

memorable design.

The navigation is

more intuitive and

easy to get started.

The overall

appearance of the

homepage is more

structured and neat.

FINAL WORDS

It is amazing how powerful the CSS design is. By modifying the CSS

code one can achieve astonishing results and a completely different

visual appearance of a website.

All the graphics (except for the photos) and the visual effects in both

websites are achieved by CSS. This includes shapes, colors,

borderlines, fonts, font effects, buttons, button hovering effects, etc.

Special thanks to TEMPLATED www.templated.co

for providing the HTML | CSS package for this

re-design project.

Copyright of the redesign: Marina Georgieva

www.css.otom-ltd.com

April 2015