OVERVIEW 

I created a fully-responsive website to coordinate with the release of the award-winning travel 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

PROCESS

Although I had previously very little experience with HTML/CSS, I really enjoyed diving into coding.  I built up the site in iterations, focusing on a visual presentation that highlighted the books vibrant content, and whimsical narrative.

I started with some very rough sketches and ideas of how I would like to present the information.  I used the content and book's cover photo for inspiration. 

Doing a quick interview with the author and some competitive research, I realized it would be best to provide pages to present info about the author, the book, an excerpt, and contact info; and this could be presented in a persistent, tabbed navigation across the top of the screen.

As I continued to iterate the landing page design, I realized that, as much as I loved the cover photo, it was really too noisy and using it’s image as a background would really 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 cover in the background and navigation tabs.

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

Ultimately I created a simple, clear interactive, webpage that has received praise from a few users I presented it to, as well as the author himself.

TAKEAWAYS: 

From this experience, I realized:

  • how coding is much like the experience of learning a traditional language;

  • the interdependent 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 in HTML/CSS;

  • perform more formal tests with users to see what parts of the design worked, or didn’t;

  • add more interactions, perhaps some modest Javascript interactions.

I am delighted that I developed a wealth of knowledge of the inner workings of web development and working knowledge of HTML and CSS.  The process was challenging but quite rewarding, and I am excited to continue my exploration of coding in the future.

Now that we’re better acquainted: