Book Website Design & Development and Cover Design for Myrra Kate

243344600_900873950808802_410133389725145826_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=nJx5mYuKJjgAX9uBHvd&_nc_ht=scontent-fml2-1.xx&oh=6b20e758326af9f82207061414848a08&oe=617A636A

Hae Park
Oct 2, 2021 · min read

If you’re an author and you’re launching a book, how would you promote it on social media? Out of the tens of different links where you have listed your book for sale — between Amazon, Barns & Noble, a book website, etc. — which link would you primarily promote?

Many authors don’t prioritize creating a book website when they plan for a book launch. It’s understandable, because our client, Myrra, also didn’t prioritize creating a book landing page when we first started the project.

As a customer, it’s important that they go through a consistent brand experience until purchase. This can be anything from a simple social graphic that leads to a website, and to a book and its book cover.

One of the biggest challenges Myrra had with her plan to promote her book was that she had multiple links that she wanted to promote due to her audience group largely divided into two: international and national.

So it was crucial for us to develop a website that not only introduced Myrra and the book but could also serve as the one place everyone would go for everything — from purchasing the book to redeeming the gifts that were hidden in the book.

Identifying the Brand Voice & Messaging

From the aesthetics of the design to the copy and the feel that we want the visitors/customers to have when they interact with the brand, having a clear brand voice & messaging is essential to any project that we do.

Even though it’s a long and difficult process,


Key Messaging

From the workshop, we identified a few key messaging points that we use throughout the website.

The Courageous Ones — identifying the connecting word that unifies the customers

Unreasonably Brave — the differentiating factor for the brand

Manifesto & Anthem — the phrase that will empower and bring us together

Designing the Book Cover

After receiving the main artwork from the illustrator, we began playing with the layouts and colors of the book cover. Initially, the illustration contained completely different colors than what we have now, so there was an extra process in requesting to change the colors to what we have set.

We came up with two styles of designs — one being a neatly organized book cover and the other being a journal-style cover. Upon *immense* discussion and voting, we decided on the book layout we have today.

Designing the Book Website

For designing the book website, we went through multiple versions of the website until we reached the final version we have today.

We first outlined the content in the first draft, brainstorming what will go on the book landing page.

On the second draft, we began to start prototyping the website, which means we added colors and actual images we wanted to use. For Myrra, her fonts were already decided when we built her main website and reused 80% of the colors we selected when we first created her brand.

We wanted the logo of the book to be on the front and center of the website, so we went through a few different styles on how we can present it.

And on the final prototype, we added the brand manifesto that we developed in the Brand Voice & Messaging Workshop. We changed the mood of the website from a lighter color being dominant to a more dark-brown color as the main background color.

The initial thought was that we wanted it to give a local bookstore kind of feel, but the photos and mockups suited the darker background much better so that played a huge factor in this decision.

First Draft

Outlining the content:

Second Draft

Starting to prototype:

Final Draft

Ready for development!

One of the most important sections of the page is the three columns that hold the purchase links, a form to redeem gifts that are hidden in the book, and sharing the website to other social platforms, and more.

While outlining the content, it was prominent to us that we needed all three items in one row, divided into three sections. At first, there were three blocks that looked separate, but we ended up spreading out the three boxes full-width to give a more spaced-out look.

Developing the Website

We mainly use WordPress in our web design studio, and we divide hosting our clients’ websites into a few different plans. Usually, the client would pay for the hosting and tools unless they subscribe to a website maintenance plan that we offer to our clients internally.

While the main WordPress hosting we use is Kinsta for its reliable hosting, the prices couldn’t be justified for a one-page website. So for this website, we decided to go with Bluehost which was much more affordable in terms of hosting a one-page website.

To build the website, we used Beaver Builder as the main framework and used the UABB add-on as well.

The Final Reveal

And this is the final reveal of both the book website as well as the book cover for Myrra’s book, Faith Steps! As a studio, it was the first time we worked on a book website design, which was an exciting project for us.

If you want to work with our studio for designing and developing your website, please head to our studio page to learn more about our process!

Faith Steps Book Website

Thank you for reading, and I hope you have an absolutely amazing day!

Hae Park

Table of Contents
    Add a header to begin generating the table of contents

    All—in Website Experience
    with Made at Dawn.

    We design & develop websites of festival level and bring strategic value to make a change for timeless brands and businesses.

    Sorry, we couldn't find any posts. Please try a different search.

    242759522_900755297487334_3038394624981398760_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=730e14&_nc_ohc=tdkWwK2p0w0AX-_RRsr&_nc_ht=scontent-dfw5-1.xx&oh=79901e06dfa9948ad5f1444e4754cb73&oe=617874CA

    Haeun Park
    — Founder of Made at Dawn

    Meet the Founder & Director of Made at Dawn.

    Haeun Park —

    As a professionally certified website design & developer, Haeun has worked with brands worldwide to deliver websites that turn ideas into thoughtfully planned-out digital experiences.

    Haeun spends most of her time behind her desk, with a 35" monitor she proudly boasts to her family, who doesn't understand why it's crucial to a designer.

    A moment of silence for her monitor.

    Her life motto is "ignorance is a form of bravery," which motivates her to try new, bold things in life that most people are afraid to do.

    Haeun's eye for design, detail in development, and experience in architecting websites enables her to combine creativity and technology to provide an all-encompassing solution that is not just well-designed, but practical and well-planned.