Journal Design - A #eCSSercise Feature - Pt. I

17 min read

Deviation Actions

gillianivyart's avatar
Published:
4.7K Views

"I refuse to answer that question on the grounds that I don't know the answer"
— Douglas Adams


The focus of this article is to highlight fine examples of CSS and journal layouts that think outside the box.  This is part of a lesson for my Students at eCSSercise, which I have been featuring deviants from the CSS community who have displayed ingenuity and creativity in their journal skins.  I would like to showcase their art here, as I have now compiled a long list of deviants to feature.

This article will highlight the Artwork of journal designing, the next article will feature Formatting and pure CSS design work.

The Art & Design of Journal Skinning




Sometimes, I come across such brilliant works of journal skinning, where instead of just putting art into a design, the artist made art out of the skin itself. When designing a journal skin, I like to think of the design itself as an aesthetic piece, where every link, heading and sidebar would be part of the composition.




Pyek :iconpyek: pyek.deviantart.com/gallery/29…


AALC Vintage Sketch Journal by Pyek Old Sign Journal Skin by Pyek
Journal: Repeatable Center by Pyek
Journal Tutorial


In her gallery, the first item is a tutorial for repeatable textures in a journal skin, which is very clearly written and easy to understand. A must read!

Her journals divert from the typical header/footer layout by giving shape to the boundaries of the journal within the shapre of the images and borders.  They are both creative and beautiful.



Nesmaty :iconnesmaty: soulfight-a-devianty.deviantar…


Snuvi journal skin by Nesmaty:thumb175697577: Ladybug skin by Nesmaty
Rainbow Blocks by Nesmaty
Block Snippet


Her gallery is full of creative works where the images are layered and worked into the layout.  Please pay special attention to fav.me/d30nl9s">Snuvi Journal Skin, where she was given one static image to work with. She cut out the birds, placed them where she wanted for the layout composition and made a background for the journal that would tile/stretch smoothly as the journal expands (see Solinni's journals snuvi.deviantart.com/journal/ ).

This is a perfect example of what I've been trying to figure out how to make a tutorial for. Using a single image and creating a journal layout out of it, rather than just a header or footer image, but creating a design. Look through Nesmaty's gallery for inspiration.



CypherVisor :iconcyphervisor: somrat.deviantart.com/gallery/…


El Club by CypherVisor Zeno Journal by CypherVisor Bent It by CypherVisor
RiFLX Journal CSS final by CypherVisor
Daily Deviation Journal


CypherVisor's skins all exercise dynamic CSS and design.  His work combines code and graphics to create functionality and aesthetic.

Also, he has a plethora of CSS resources for coding custom boxes, which can also be used for journals and coding any where on DeviantART.  Definitely a prominant memeber of the CSS community to look to for design and coding inspiration.



GinkgoWerkstatt :iconginkgowerkstatt: ginkgografix.deviantart.com/ga…


.:Grey Flowers II by GinkgoWerkstatt .:Pink Passion by GinkgoWerkstatt .:Grey Hills by GinkgoWerkstatt

Video Walkthrough


Known as the CSS Fairy, GinkgoWerkstatt is probably one of the most well known figureheads of the CSS community.  Undoubtedly, whether you know it or not, you have likely come across her work or influence.  She has a vast motherload of tutorials and resources which any aspiring CSS coder/designer should want to look into.

Besides that, her journal skins are gorgeous and beautifully coded.  Yes, codes are beautiful...  Her design elements have a myriad of layout configurations and graphical elements layered and interwoven.



Ikue :iconikue: ikue.deviantart.com/gallery/39…


Post-it Note Journal by Ikue Clean Cut by Ikue black + blue by Ikue
Signed, Sealed, Delivered by Ikue
A Stylish Journal Skin


Ikue's brilliant fav.me/d227vtu">Post-it Note Journal is an effective design which uses only the title and HEADER of the journal. It is simple and an innovative way to use DeviantART's journal in a creative design. A prime example of thinking out of the standard layout.

His gallery exhibits beautiful designs where the fonts and graphics mix superbly.  All the sections of the journal skin are worked into the overall design.  His work demonstrates strong design skills with a professional touch.



Kjherstin :iconkjherstin: kjherstin.deviantart.com/galle…


a day of rest CSS by Kjherstin

An Elegant Design


Have a look at fav.me/d49j0xp">A Day of Rest CSS which demonstrates a photo transformed into a part of design by taking the subject out of the photograph and into a photo style frame for the header. The live view displays some fine CSS elements such as hover effects, in particular, the credit. Which is a simple copyright "button", with the credit popping up on hover. This effect is achieved through hover and display, a simple yet effective technique.

Her journals all display a professional style and aesthetics.  The journal is the artwork, as much as the journal displays the art.  Whether you're designing for journals, blogs or a website layout, these are key techniques.  Especially the tiny details like the credit button.  It is the icing on the cake that gives the journal the wow factor.  Sleek design with a side of wow.




:iconecssercise: gillianivyart's Student's Assignment eCSSercise




Students, you are to choose any journal by any of the above.  Install it, test it and thoroughly critique it using the DeviantART critique feature.  If it is not enabled or you are not a premium member, please leave a very detailed comment evaluating the use, functionality and design elements of the journal.  If they do not request a critique, ask them first or choose another deviation.  Once your critique has been accepted, turn it in to me on our class discussion thread.


Part II will feature CSS Coding as Design




eCSSercise is a group to help you learning or improving CSS skills. People from the community who are willing to help, offer their knowledge to be shared and their time to teach you how to deal with classes, properties and values.

"There's something that doesn't make sense. Let's go and poke it with a stick."
— the Eleventh Doctor
© 2011 - 2024 gillianivyart
Comments12
Join the community to add your comment. Already a deviant? Log In
CypherVisor's avatar
Cool! :love:

Thanks. I want to hug you now... :huggle: