DFCO Splash Mobile

19 Responses

  1. Mike Cummings Mike Cummings

    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:

    1st Screen
    Red fades in from white, then the atom slides/fades in and starts spinning while the page loads.

    2nd Screen
    Red fades out revealing the rounded triangle, white frame border fades to subtle gray.

    3rd Screen
    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

    likes

    over 1 year ago

  2. derric derric

    Very nice. Love your work thanks for the awesome resource.

    likes

    over 1 year ago

  3. Mike Cummings Mike Cummings

    @derric - Thanks! Your welcome, enjoy :D

    over 1 year ago

  4. Chris Biron Chris Biron

    Dude, that's going to be rad!

    likes

    over 1 year ago

  5. Giorgio Pia Giorgio Pia

    very nice! great!

    likes

    over 1 year ago

  6. Sam Morris Sam Morris

    Have you tried Skala Preview?

    over 1 year ago

  7. Mike Cummings Mike Cummings

    @Chris Biron @Giorgio Pia – Thanks guys!
    @Sam Morris – I haven't sir. Looks pretty similar though. Anything extra fancy that it comes with?

    over 1 year ago

  8. Joe Montefusco Joe Montefusco

    Those colors and that icon is foxy!!

    likes

    over 1 year ago

  9. Sam Morris Sam Morris

    @designfaith It uses a hidden Photoshop Network feature, so no need to save and upload images (which I presume is what Silkscreen does)

    likes

    over 1 year ago

  10. Mike Cummings Mike Cummings

    @Sam Morris – Oh nice! Yeah, I think Silkscreen is a little different. It mirrors file states I believe and it's not application specific.

    over 1 year ago

  11. Stefan Poulos Stefan Poulos

    @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.

    likes

    over 1 year ago

  12. Mike Cummings Mike Cummings

    @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

    over 1 year ago

  13. Patrick Rogan Patrick Rogan

    Y U NO PHOTOSHOP ANIMATE?

    likes

    over 1 year ago

  14. Mike Cummings Mike Cummings

    @Patrick Rogan – Haha. Oh, just you wait guy ;)

    likes

    over 1 year ago

  15. Patrick Rogan Patrick Rogan

    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~

    likes

    over 1 year ago

  16. Mike Cummings Mike Cummings

    @Patrick Rogan – Beat ya to the punch haha. The shot and the real thing :D

    over 1 year ago

  17. 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:

    Pros
    – Completely scalable
    – Easily editable with CSS
    – Quickly rendered in browser
    – No image requests

    Cons
    – 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

    over 1 year ago

  18. Stephen Davis Stephen Davis

    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.

    likes

    11 months ago

  19. Mike Cummings Mike Cummings

    @Stephen Davis — Thanks yo. Designed in illustrator, exported the vectors as SVG code, then built the site from scratch using the HTML5 boilerplate, SASS and some rusty JavaScript :D

    11 months ago

keyboard shortcuts: previous shot next shot L or F like