Deviant Login Shop  Join deviantART for FREE Take the Tour
×

More from deviantART



Details

Submitted on
September 11, 2011
Link
Thumb

Stats

Views
3,827
Favourites
9 (who?)
Comments
12
×

"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 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 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 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: ginkgografix.deviantart.com/ga…


.: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: ikue.deviantart.com/gallery/39…


Post-it Note Journal by IkueClean Cut by Ikueblack + 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: 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:
 
:iconcyphervisor:
Cool! :love:

Thanks. I want to hug you now... :huggle:
Reply
:icongillianivy:
GillianIvy Sep 16, 2011  Hobbyist General Artist
I like hugs! :D
Reply
:iconcyphervisor:
ok I'll give you again! :tighthug:
Reply
:iconikue:
Ikue Sep 15, 2011  Hobbyist Digital Artist
Such fancy skinners! Thanks for including me and the kind words :tighthug:
Reply
:icongillianivy:
GillianIvy Sep 15, 2011  Hobbyist General Artist
:D Well, you are a fancy skinner yourself! ;D
Reply
:iconginkgografix:
Thank you for your kind words! :love:
Reply
:icongillianivy:
GillianIvy Sep 12, 2011  Hobbyist General Artist
:hug: You're my CSS Fairy, I only have kind words for you ;D
Reply
:iconkjherstin:
Oh my so awesome! Thank you so much for your kind words on mine too :tighthug:
Reply
:icongillianivy:
GillianIvy Sep 12, 2011  Hobbyist General Artist
:iconloveemoteplz: My pleasure. I've always looked up to your work and trust your opinion for design advice.
Reply
Add a Comment: