CSS Re-design Project (April 2015)
-
Upload
marina-georgieva -
Category
Design
-
view
201 -
download
0
Transcript of CSS Re-design Project (April 2015)
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