Children’s Author WEB DESIGN
Website Design for Author of Children’s Books – Juliana Shiekh.
Client:
Juliana Sheikh
Skills:
Web Design + Animation
Steve has created a truly stunning author’s website for me. From consistency in design and presentation to typography & readability, thought has gone into every aspect of the website’s function and aesthetics. I love Steve’s sensitivity to colour and palette and his background in art also means that in my case, the use of illustrations on my website has brought together an image that is artistically very pleasing. Steve is a very good communicator and I always know what he is doing and how much it will cost me. I don’t get any surprise bills for work that we have not agreed on. He is not money grabbing! You really do get an honest and personal service. Thanks, Steve for creating my truly stunning website!
Shayna – Juliana Sheikh (Author)
I designed this website for Juliana Shiekh, a children’s book author who writes stories that weave the imaginary and the real, which are grounded in the relationship that every child has with the natural world.
Interactive Online Animation
To promote Juliana’s book, The Mole and the Sunglasses, I created an interactive story animation, that highlights a few bits from the book. This will encourage kids to interact with the story and entice them into wanting to know more.
The animated web page includes some clever coding that causes the layers to move according to where the mouse pointer is. The animation also uses some scroll events to load page elements to stagger and animate the story as the user scrolls down the webpage.
Kid’s Book Website Design & Animation
See the website and animation in action.
Site Imagery & Kid’s Book Mockups
As quite a few of her books are still in development, I have created mockups using the cover artwork to show how the final product will look. All this work is done in Photoshop, using smart layers to carefully position the artwork, change perspectives and create realistic book mockups. Ensuring that the lighting and shadows all tie in with directional lighting and that each of the books is portrayed at an interesting angle means that they look a little more intriguing than simply uploading a rectangular image of the book covers.
The idea is to have each image on the site become part of the background, so it looks like they are either placed on a wall or level surface.
Colour Schemes
The website needs to be colourful enough to be fun for kids but still functional and user-friendly. All of Juliana Sheikh’s books are beautifully illustrated, with unique characters and colour schemes. I created colour-coded sections for each of her books that reflect all the story’s key colours. As all the books are vibrantly illustrated, I developed a pastel colour scheme for the section backgrounds, to allow the illustrations and artwork to shine on the page. There are also subtle gradients used in the background to provide a bit more depth and directional lighting for the imagery.
I wanted the website to be a little off-kilter and fun, so each section is slightly offset to the left or right, rather than following a very centralised or linear layout. This is a subtle layout choice that might not be immediately noticeable but adds visual interest while still keeping everything easy to reference.
Responsive Behaviour and Styling
The site needs to work equally well on any device, so each area of the website is carefully coded and customised for different screen sizes. The responsive behaviour of each element needs to be coded depending on the device it is being viewed on. I use a combination of FlexBox to reorder elements, and responsive CSS to resize areas, based on the resolution of the screens they are being viewed on and the aspect of the device (whether it’s being used vertically or horizontally).
On large screens, each section of the site fills the available viewable area (height & width) of the browser window. This means that visitors can focus on each area of the site without being distracted by anything else. Since browser windows can be rescaled to virtually any height, I needed to also code some functionality that allowed each area to switch from being full height to simply contain the relevant info so it is all visible to be scrolled through.
