BPG - UI Sketch 2

    Newer Older

    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, bluelena69, and 37 other people added this photo to their favorites.

    1. Anthony Armendariz 65 months ago | reply

      That sir is some of the best quality UI sketch work I have EVER seen!

    2. R I A Z 63 months ago | reply

      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.

    3. Martin Kulakowski 63 months ago | reply

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

    4. R I A Z 63 months ago | reply

      Thanks Martin! ; )

    5. ChrisFromQueens 61 months ago | reply

      Awesome. Mine is almost as good ;)

    6. jayrobinson.org 61 months ago | reply

      Neat and orderly. Just how I like 'em.

    7. djaiss [deleted] 61 months ago | reply

      Wow, this is really impressive.
      Good work!

    8. lilit 61 months ago | reply

      Hi, I'm an admin for a group called I ♥ wireframes, and we'd love to have this added to the group!

    9. codyfrew 61 months ago | reply

      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 ;)

    10. R I A Z 61 months ago | reply

      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

    11. Martin Kulakowski 61 months ago | reply

      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.

    12. Martin Kulakowski 61 months ago | reply

      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? :)

    13. adamconnor 51 months ago | reply

      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.

    14. lucasggg 17 months ago | reply

      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

    keyboard shortcuts: previous photo next photo L view in light box F favorite < scroll film strip left > scroll film strip right ? show all shortcuts