Kicked back this Sunday and came up splash page concept to put up while I build out the redesign of my portfolio. If you guys don't use Silkscreen while designing for mobile or tablet – I highly recommend it. Changed my life. You can sync Photoshop, Illustrator, Fireworks, and any image file type. Super nice :D
Anyways, the UX:
Red fades in from white, then the atom slides/fades in and starts spinning while the page loads.
Red fades out revealing the rounded triangle, white frame border fades to subtle gray.
Logo slides up and the dribbble, twitter, and contact icons fade in sequentially.
Would love to hear everyone's thoughts on the UX. I know text might help clarify the icons but then again I think they are all pretty recognizable.
Also, attached the real pixels if anyone is interested :P
about 1 year ago
Very nice. Love your work thanks for the awesome resource.
@derric - Thanks! Your welcome, enjoy :D
Dude, that's going to be rad!
very nice! great!
Have you tried Skala Preview?
@Chris Biron @Giorgio Pia – Thanks guys!
@Sam Morris – I haven't sir. Looks pretty similar though. Anything extra fancy that it comes with?
Those colors and that icon is foxy!!
@designfaith It uses a hidden Photoshop Network feature, so no need to save and upload images (which I presume is what Silkscreen does)
@Sam Morris – Oh nice! Yeah, I think Silkscreen is a little different. It mirrors file states I believe and it's not application specific.
@Mike Cummings @Sam Morris I need to check those out. I've been using Live View forever. It basically just screen casts to any device. I've even hacked it in presentations by running a keynote with Live View watching, and then multiple iPads around the table showing the presentation live.
@Stefan Poulos – Haha, oh man that's awesome. You're my hero. Hopefully these apps make your life easier. I think Adobe has an app too where you can sync a concept to multiple devices at once. Granted its probably $1000.00 but ya know.. :D
Y U NO PHOTOSHOP ANIMATE?
@Patrick Rogan – Haha. Oh, just you wait guy ;)
You do that, and I'm gonna see about doing it in CSS3 :D I actually thought about making a simple atom like that my logo last week or two~
@Patrick Rogan – Beat ya to the punch haha. The shot and the real thing :D
by Mike Cummings
Had a ton-o-fun building out this splash page for designfaith.co last weekend. Mostly, I just wanted to have something up (thats what she said) while I build out my full portfolio site.
The nifty part – no images are being used. Everything is SVG code (check the source on designfaith.co). Learned a tonnn about SVGs and I was actually really surprised with how easy they are to work with. Anyways, here are the pros/cons I found personally during the whole process:
– Completely scalable
– Easily editable with CSS
– Quickly rendered in browser
– No image requests
– Not supported by some browsers (cough, IE)
– Limited access to some attributes
Also, I think its funny the splash page fits in a dribbble shot. #crazyresponsive
Would love to hear your thoughts on the UX, animation, SVG's or whatever else :D
about 1 year ago
I really like this, did you design it in Photoshop first than convert it to CSS? Are you using Squarespace?
Keep up the great work.
9 months ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.