Project 001 | Suzannecollinsbooks.com

Blender, Figma, Code (HTML, CSS, JS)

This week I decided to work with Suzanne Collin’s (author of The Hunger Games series) website.

Suzanne Collin’s Website
http://www.suzannecollinsbooks.com/

I thought it, for the most part was visually expressed in a suitably manner. My only main and initial contention with it, was the disproportionate use of uppercase text throughout the design.

Uppercase text has particular use-cases (check out this article by Saadia Minhas to better understand what they are). It can be used to shout at the viewer, and/or grab their attention, however, if used too often it loses its power and it is also not the most readable form of text.
Therefore, my initial thought was to lessen the use of it, and put more emphasis on building a visual hierarchy system based on varying font weights, as well as sizes, as opposed to just making text uppercase to signal that it was a title/heading.

My failing, which I noticed and was highlighted by my sisters, was in me trying to over-do the changes. Things quickly became cluttered, and the design served more to display my (failed) attempt to show off what I was able to do in Figma and Photoshop, rather than communicating the heart of what it is that the page is meant to represent.

I initially didn’t want to show this work anywhere or to anyone, because I felt like it didn’t represent who I am as a designer, but at the same time it’s important to share your wins as well as your loses, and it did teach me a lot about design…so…voilà:

I added an excerpt section from the book to hopefully generate some interest in the viewer.

After finishing the design I wanted to practice other skills and software. So I decided to do a 3-D model of a snake in Blender — an idea I got after seeing the cover of the main book on the page ‘The Ballad Of Songbirds And Snakes’.

Doing this model taught me a lot about sculpting, and the power of the default cube.

The final result:

Top Right: Reference | Top-Left: 3-D Model Mesh
Bottom-Left: Finished Project | Bottom-Right: Close-Up of Finished Project

The default cube, for anyone who doesn’t know is the cube that is initially present when you start up the software, it is usually deleted before you begin using the software, unless you have a use for the cube. It can also easily be re-added at any point by pressing Shift + A, going to Mesh >Cube.

I cut the default cube in half, and added a mirror modifier to mirror my actions from one side over to the other.

A subdivision modifier was then added, and I bumped up the viewport and render settings to ‘4’. In Edit Mode, I did my best to get the shape of the snake’s head, using the above reference image, and also an image of a bird’s-eye view of a snake’s head.

(The reason I didn’t include the bird’s-eye view image I used is because it didn’t have all that much of an effect on the final product, so any of the results would work)

When I finished that, and got the shape of the face as accurate as I could, I went into the Sculpting Workspace, and added the scales, and include some imperfections and scratches/marks.

My CPU wasn’t able to handle it much longer, so I had to abandon the texturing part of the model and render the image as is.

I added a camera to the scene, positioned how I wanted it using the Rule of Thirds Composition Guides, and the Passepartout settings both both found in the Object Data Properties (under the Viewport Display).

After rendering the image using the Cycles Renderer, I moved onto Photoshop to paint over the image.

Lastly, I knew that I wanted to practice coding too (HTML, CSS, and JS). So I went into my files made a new folder, initiliased a git repository using Git Bash and after finishing it all made a remote repository in Github and pushed everything to it.

In the end, I learned a lot of things from undertaking this coding project, which I highlighted in the README file which is available in my SC-Books-Practice Github repository.

The final product looks a little something like this:

I don’t write about all of my work, only the ones related to UI/UX Design, so if you’re interested in seeing any of my other work, please check out my Instagram: https://www.instagram.com/richard_ogujawa/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store