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, design, copy and page development.


an earlier iteration

round 2 - beginning to form navigation

final design and layout

initial mobile wire-concept

initial tablet wire-concept

final responsive full-page desktop view

Final responsive mobile view

final tablet view with interactive elements


Although I had previously very little experience with HTML/CSS, I really enjoyed learning them.  Over the 10-week course, I absorbed as much new information as I could to be able to use these new languages. 

For our main project, I decided to do the website for my dad's new book about his world travels, "Contra Travel".
I first 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 palette of the photo in the choice of colors.

I did some simple wireframes for mobile and tablet to help understand spacing and placement for the UI and content.

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


TAKEAWAYS: 

From this experience, I realized:

  • how coding is so much like 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.

with a bit more time, I would:

  • continue to deepen my familiarity and skills;

  • test with users to see if my design worked;

  • add more interactions, perhaps even some modest Javascript interactions.

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. 


Now that we’re a bit better acquainted: