starvingartist's avatar

deviantART Minimal

19 46 6K (1 Today)
By starvingartist   |   
Published:
© 2002 - 2020 starvingartist
This is basically my take on the new deviantART design with a focus on minimalism.


This layout was created with standards-compliant browsers in mind (IE6 and Moz). Since it's a skin, people with these browser can choose this layout. In return, they'll get HTML code that is extremely optimized, resulting in smaller file sizes, faster downloads and faster rendering.

The layout itself does *not* contain any graphic files at all, with the exception of the dA logo necessary for the contest requirements. Everything is done via HTML, CSS, and Javascript. The layout for the main page uses CSS Positioning instead of tables. There are no spacer tags. This was to make it gracefully accessible to other browsers. (Try using a CSS-Disable bookmarklet or view the source to see.) Toolbars are block-level anchor tags, with CSS' pseudo a:hover triggering image-less mouseovers.

To increase readability, the site tries to reduce the number of borders for various page elements. It reduces eye fatigue and makes the site less distracting. Letter spacing and line spacing have also been increased to make things easier to read.

Some accessibility features are included. Hidden skip-links make it easier to navigate the pages. Common access keys have been defined (ie: Press ALT-4 for Search). Mouseover the cryptic letters to the right of the deviantMessages status and tooltips will popup explaining- the abbreviations.

Sidebar headings on both sides are also collapsible and expandable.

Mozilla and IE extensions were used to enhance the page for each particular browser. This includes curved edges and scrollbar colors effects.

The userpages were created with a professional, "porfolio" look in mind. The intitial header makes it clear you're on a user page. Userpages are also divided into sections: User Information (everything a person needs to know at a glance), Personal (for, er, personal stuff), Spotlight (for current work), Recommended (the user's favorite deviations in deviantART), Community (all the interactive stuff) and Generosity (for buying the user stuff). The deviant profile uses a tab interface to show all that nice tabular text data.

The screenshot only shows a portion of the site. Prototypes of the actual pages are available online:
Homepage
Userpage

The source code itself is still a work-in-progress (especially the userpage), but feel free to take a look at it (the zip file includes everything except the content-filler images). I'm sure I forgot to mention a couple things, as I've made a whole ton of changes over the last few days.

Disclaimer: I will be out of the country when the contest ends.
Comments46
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
UnckleB's avatar
UnckleBHobbyist Digital Artist
man these were the good ol' days... minimalist was freakin' awesome!
catalin-v's avatar
catalin-v Interface Designer
i wish i joined deviantart from beginning :excited:
E06's avatar
A bit too messy perhaps...
ZONATA's avatar
Very nice!!!
idreamz's avatar
very very nice! :D (Big Grin)
centaura's avatar
Fantastic!
Im sure too this is the faster DA could to exist :) (Smile)
I like a lot this, and I think It could to be very useful for surf DA in a fast and clean way, but I think too the future DA presentation will take another way... maybe a bit more graphically charged.. maybe you can to do some skins for this

Moreover at userpage you have good ideas. Its in general, a very well made work Thumbs Up Congrats
phatnadz's avatar
Yeah, this is by far the best design so far. This design is efficient, I'm sure the template isn't any more than 30KB. The current design has so many stupid images in the layout, and it causes DA to lag badly. This new design would be much easier on the servers, while restoring emphasis on the thing most important to DA and its viewers: the artwork. I love the javascript elements as well. Makes the site a whole lot more interactive. Only thing I would suggest is some more color themes. It would be awesome if you had different sylesheets for each color theme, and users could dynamically switch between them. Or heck, go one step further and allow users to customize their own color themes through hexadecimal or RGB values. This would be impossible with DA's current design, but since your layout includes no images, it is entirely feasable.

Also, I think you could increase contrast even more by including a white background, or slightly lighter background (as you have done in the sidebars), in the content tables. The one thing I hate about DA is all these dark, puke-colored backgrounds. Or at least provide a 'contrast maximization' skin.

+fav
bikerboy's avatar
tis a great miniamial look and feel to it and I would just like to say that you've done a great job and good luck my friend.
aeon-x's avatar
love it
404error's avatar
Love it. The code is o-so-clean and lightweight too. Couple beefs..the most striking to me was the mouseover of inputs and textareas. Found that kinda distracting and a little bit too much contrast, maybe a slightly lighter colour? I also don't like the use of the ? mouse cursor, again it's distracting. Other than that, absolutely fabulous, good luck on the contest, I'd love to see this every time I visit.
daylighter's avatar
daylighter Digital Artist
ok, very very nice and :+fav+
Kevin's avatar
KevinProfessional Digital Artist
i really like this and all, but it reminds me so much of the original classic DA design. I think we are in dire need some soemthing new and fresh here.

Good work though, I really enjoy this!!
amdayton's avatar
i love the minimalism and simplicity. I think it would still be nice to see a more different lookd for v3 though (this one just looks like a filtered version of v3). overall this is still my fav so far.... well thought out and designed
yoyo's avatar
this is absolutely stunning. i would be honored to see this every time i used deviantART Logo . plus favs +fav
digi-fix's avatar
very nicely done.
dj-designs's avatar
dj-designsHobbyist General Artist
I like this design alot, very minimalistic and nice. Would be a very good choice for the modem surfers. My main concern has to do with the userpages, I like the way you have made different "sections" for it but have in mind that far from every user is active enough or takes advantage of all the features that are available on this site. Lets say someone that doesn't have a deviantID, webcam image, favorites, devious desktop and wishlist items. That leaves up Alot of empty space on the pages and wouldn't look any good. The way it is now the comments on a userpage gets bumped up if nothing is above them but this way forces them down below the (possible) empty space on the page and takes up much unnecessary vertical space. Even without just a deviantID and webcam it would feel very empty on the userpages. Don't get me wrong I like this idea but it has flaws depending on how many features the users chose to use.
njp's avatar
WOW. great work man. i love the layour of everything... and dread, the index page is the only part that is very similar. the user page is very different except for the colors :D (Big Grin)
i love it all. especially the user info part!
dreadventurous's avatar
Nice and clean layout, BUT it is just too much of the actual design. I think that da3 should be more evolutionary or somehow like a re-invention of itself, but not just a skin or a slight remix.
Indeed, I would have preferred your design for the actual version da2. Nevertheless it is not enough Heir to the throne to become King.
felipin-sioux's avatar
Wonderful work! This really is the best one i've seen yet.

Most of the designs submitted until now are exactly the same one, just with some color changes and tables. You've made it great, because you changed the concept. I was waiting for this.

And you changed very well. I liked the minimal concept, it would work as good in fast-speed connections as in dial-up ones.

Unfortunately, i disagree in a point with +splat. I liked a lot the idea of the "tabs" in the Deviant Profile. I went to take a look in both the preview and the html version, and the preview, with the tags, looks much better than all the information displayed at once. It is using too much space, specially for a "minimalistic design". (just opinion).

I would personally prefer Table Positioning than CSS positioning. It is, again, my opinion.. But I think that CSS positioning will never work perfect in all browsers, at all resolutions, with all configurations... Ex.: I'm running IE5 in 800x600 resolution. And some things looks incorrectly placed. The "Browse" link, in the top, is partially out of the table. Also, in the news, you icon(avatar) is "cutted" in the right side.
I think CSS doesn't have a perfect integration with all browsers: Remember that there are people using IE, Netscape, Opera, Mozilla, and many others. There are people running 800x600, 1024x768, 1200x1024, ...

About the "monotony" that $attila said, i think this is a bit "monotone" in the deviations list(userpage). You should just add a bit more contrast between the background colors of the deviations.

I liked very much the idea of hidden so many table borders. Your design looks much clearer without so many of them. But I miss one separating the Recent Fav from the Wishlist, in the "recommendations".

Hmm... I don't remember of writting a so long constructive comment like this one! My fingers hurts...

.
.
.
oh yeah... +fav
r-sandbox's avatar
stan stan the sunshine man... lol.

awesome work yet again... the minimalistic hallmark of starvingartist.

i like how the userpage is divided up neatly (i.e. User Info., Personal, Spotlight, Recommended, Community, Generosity). it's definitely a pur-dy thing to look at :) (Smile)

although the colour scheme is easy on the eyes, would there be another one that would work just as well? i dunno, just to change things around a bit :) (Smile)

but what do i know? awesome work, as usual! +fav

~r-sandbox


p.s. what do you mean you're gonna be out of the country? boo! ...you gonna be here for the 22nd?
osiris679's avatar
i really like this design! clean, slick, and most important: simple. Good job, and I wish you luck! =) (Smile)
splat's avatar
splatProfessional Interface Designer
Nice work again. Very minimalistic, which would be a plus for many users with a slower connection. I like some of the things you've done with the user page, though I'm not sure I like the Deviant Profile, because you have to click each tab to get all the information. I'd personally rather have it all displayed at once.

Anyway, great work. One of the best designs yet. =) (Smile)
playboy's avatar
playboy Interface Designer
very cool, i know that your going to win stan.
alphakx's avatar
alphakxProfessional Interface Designer
this is awesome! excellent work!
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In