BPG - UI Sketch 2

Here's a page from my sketchbook. It's a finalized initial sketch to define the navigation system and the overall layout of the website BPgraphics.


All sketches are based on the Information Architecture documents prepared by the team and approved by the client.


Upon some feedback from the team, I can refine these further and then go to town in Photoshop designing the official interface mock-ups before I move on to XHTML/CSS coding.


Website URL: www.bp-graphics.com


If you like what you see, and would like my help on your next project, contact me on Flickr or directly at: martin@lunchboxcollective.com

  • Anthony Armendariz 7y

    That sir is some of the best quality UI sketch work I have EVER seen!
  • Ahmed Riaz 6y

    Hi, I'm the admin of a a group called User Experience Sketches , and we'd love to have this photo and any other user experience sketches added to the group.
  • Martin Kulakowski 6y

    @Anthony - Thank you! I'm going to try to take photos of more UI sketches soon. :)

    @{riaz} - I'll upload these and others to your group shortly.
  • Ahmed Riaz 6y

    Thanks Martin! ; )
  • ChrisFromQueens 6y

    Awesome. Mine is almost as good ;)
  • Jay Robinson 6y

    Neat and orderly. Just how I like 'em.
  • djaiss 6y

    Wow, this is really impressive.
    Good work!
  • Ivana Jurcic PRO 6y

    Hi, I'm an admin for a group called I ♥ wireframes, and we'd love to have this added to the group!
  • Cody Frew PRO 6y

    My cynicism tells me that this goes against the very purpose of wireframes (quick, iterative, lacking fine details, messy so as to imply a lack of finality)- BUT I can't help but admire this! I think I wouldn't mind an office with this type of wireframe drawings as the wall paper...

    Anyway, nice work ;)
  • Ahmed Riaz 6y

    I think this is a really refined sketch leading up to a wireframe. But naming conventions aside I think the more important thing is to reclaim sketching or roughing things out as a part of the interaction design process.

    ` r
  • Martin Kulakowski 6y

    Actually, this was a refined sketch from a group of sketches I had to present to the agency of record for this client. It follows the IA document, not lead to it. Our IA process includes conceptual site outline, then homepage and main interior pages wireframes, then my sketches. 95% of the time they are way more messy than this, this was an exception. After that of course I jump into photoshop > production > implementation. I will definitely try to share more stuff when I have a minute to dig through the archives! Seems like a lot of people find it interesting!

    Thanks for all the comments! Let me know if you have any other questions.
  • Martin Kulakowski 6y

    I should add that our wireframes are more about organizing the most important information on the page using a rating system, with attached notes. It's then up to me to come up with different layout ideas in my sketches, *IF* I choose to do that. Other times I can just follow what's been already laid out in the wireframes. I think it would be best if I just uploaded the wireframes to illustrate this process, eh? :)
  • Adam Connor PRO 5y

    Hello, I’m a moderator of the group UX Sketches, where we collect all sorts of User Experience sketches. It would be great if you could add yours to the group.
  • lucasggg 3y

    great work - my question is about the materials (block, pencil, pen) you prefer/use when creating this kind of sketch.

    i am using a Rhodia notebook with dots instead of graph (works pretty well to avoid the graph interfering with the drawings) and a mechanical pencil.

    any insights or recommendations would be greatly appreciated
41 faves
Taken on November 24, 2008
This photo is in 4 groups
This photo is in 1 album
This photo is in 3 galleries

Additional info

  • Viewing this photo Public
  • Safety level of this photo Safe
  • S Search
    Photo navigation
    < > Thumbnail navigation
    Z Zoom
    B Back to context