BLACK OCEAN BOOKS

Tools I am using

• Adobe XD
• Adobe Photoshop
• Bulma

Design and Build Process

I met with Richard, the owner, and discussed what goals he had for the website and about the brand he was building for his company. We talked about design styles and came up with a list of goals for the website. I sketched out some ideas and made a rough paper mockup.

Once we had a general idea in mind, I created a higher fidelity wireframe using Adobe XD. I marked out the I met with the owner again and once I had his approval, I created a high fidelity mockup. I included real images, font styles, and replaced filler test with actual content.

Now that he has approved the design, I am in the process of building the website. I am using the Bulma framework and custom CSS. I am also using javascript to build functionality into the page.

Wireframe created in Adobe XD

Color Mockup in Adobe XD

Problems I encountered

The largest obstacle I have encountered while working on this project is learning how to build features that I have never used before. For example, I have never made a testimonial slider without using a bootstrap extension, so I needed to find a way to incorporate a slider that did not use bootstrap. I also needed to learn about Bulma extensions in order to add modals and an accordion and I also needed to add javascript in order to make those features function. I decided to add an animation that cycled through words even though I was not sure how to do that and I have not used a lot of animation before. Finding solutions to these problems was challenging but I learned a lot.

The other large challenge that I faced was that I wanted to make it easy to update books when new ones were written. I did not want to have to write out new html sections for each book or make updates in many places. I tried to make a javascript function that would make html for the books sections, modals, and accordion menu. However, I did not plan this out well so the code is messy and the function to build the accordion section does not work right now. I understand that my javascript code could have been written better but I am glad that I was able to make the site function the way I wanted.