Shop Mobile More Submit  Join Login

"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:…

AALC Vintage Sketch Journal by PyekOld 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">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 ).

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:…

El Club by CypherVisorZeno Journal by CypherVisorBent 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.

ginkgografix :iconginkgografix:…

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

Video Walkthrough

Known as the CSS Fairy, ginkgografix 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:…

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

Ikue's brilliant">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:…

a day of rest CSS by Kjherstin

An Elegant Design

Have a look at">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: GillianIvy'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
Add a Comment:
CypherVisor Featured By Owner Sep 16, 2011
Cool! :love:

Thanks. I want to hug you now... :huggle:
GillianIvy Featured By Owner Sep 16, 2011  Hobbyist General Artist
I like hugs! :D
CypherVisor Featured By Owner Sep 17, 2011
ok I'll give you again! :tighthug:
Ikue Featured By Owner Sep 15, 2011  Hobbyist Digital Artist
Such fancy skinners! Thanks for including me and the kind words :tighthug:
GillianIvy Featured By Owner Sep 15, 2011  Hobbyist General Artist
:D Well, you are a fancy skinner yourself! ;D
ginkgografix Featured By Owner Sep 12, 2011
Thank you for your kind words! :love:
GillianIvy Featured By Owner Sep 12, 2011  Hobbyist General Artist
:hug: You're my CSS Fairy, I only have kind words for you ;D
ginkgografix Featured By Owner Sep 13, 2011
Awwwwwwwwwww :blush:
Kjherstin Featured By Owner Sep 12, 2011
Oh my so awesome! Thank you so much for your kind words on mine too :tighthug:
GillianIvy Featured By Owner Sep 12, 2011  Hobbyist General Artist
:iconloveemoteplz: My pleasure. I've always looked up to your work and trust your opinion for design advice.
Kjherstin Featured By Owner Sep 12, 2011
WOW thanks! You know I always, always listen to the advice of others. There is always so much to learn. Hey and you're not bad yourself kiddo!
GillianIvy Featured By Owner Sep 12, 2011  Hobbyist General Artist
:giggle: I know, one of the reasons I wrote this article. For my Students to look at other's work who are good examples. Then evaluate how they do their work. So that way they can think of their process when making their own process. ;D

And thanks! I'm getting better. lols!
Add a Comment:

More from DeviantArt


Submitted on
September 11, 2011


9 (who?)