OVERVIEW 

I created a fully-responsive website to coordinate with the release of my father's book, "ContraTravel".

CHALLENGES

  • First web design; written from scratch in HTML/CSS
  • needed to be fully responsive
  • create a cohesive, unique design to unify across all pages
  • coordinate with the book's release date

MY ROLE

I did research, analysis as well as design, copy and development.


early site design

site integrating nav elements

'ContraTravel' - final design format, based on flag colors on the cover

mobile wire

tablet wire

web responsive mockup

mobile responsive mockup

tablet responsive mockup


Though I had very little experience with HTML/CSS, I dove into learning and practicing.  Over the 10-week course, I absorbed as much new information as I could to be able to use these new languages. 

I drew out some rough sketches and ideas of how I would like to present the page.  This was inspired by the energetic flow I felt in book's cover photo. 

As I continued the design process, I began to realize that, as much as I loved the cover photo, it was really too noisy and would essentially impede readability.

So I decided to scrap the photo background in favor of a flatter, more 'material design'-influenced style - but still referencing the pallette of the photo in the choice of colors.

I did some simple wireframes for mobile and tablet, focused on the concept of 'mobile-first'.

Ultimately I created a simple, seamless, single page responsive design that has received praise from users as well as the author himself.


TAKEAWAYS: 

From this experience, I realized:

  • how similar coding is to learning traditional language
  • the intimate and beautiful relationship between HTML & CSS
  • the proper language and structure for responsive design
  • just how challenging programming can be

I am delighted to feel that I developed a wealth of knowledge of the inner workings of web development and working knowledge of HTML5 and CSS3.  The process was challenging and very rewarding, and I am excited to continue to dive into development in the future, and continue to refine my design and coding sensibilities. 

with a bit more time, I would:

  • continue to deepen my familiarity and variety of skills
  • integrate and practice more java script
  • continue developing new projects