What Happened When My Startup Was Featured in Techcrunch
eric bieller i make things

Category Archive: Graphic Design & Photoshop

  1. My UX / UI Design Process

    1 Comment

    The first thing to note here is that everyone’s process is different. There is no one size fits all here and there likely never will be. Even though we are designing user interfaces we are still creating art. Creativity and inspiration sit at the core of UX and UI design which makes design processes subjective.

    That being said, here’s what my typical design process looks like..

    Thinking

    When I’m faced with a design challenge, the first thing I do is sit and think. I don’t open Photoshop, I don’t break out the sketch pad.. I just sit and think about what it is that I’m building. I try and wrap my head around the value of the interface, what the most important parts might be and how the user flow might feel.

    It’s sometimes enough to simply sit in front of my computer and reflect on the experience I am about to build, but often great ideas come to me when I am taking a shower in the morning or laying in my bed at night. So, if I’m feeling blocked on a design and not sure where to begin, sometimes I’ll just leave it for tomorrow. I usually find that I start the next day full of ideas and ready to start sketching.

    Sketch it out

    After I feel like I have a good mental handle on what it is I’m trying to build and I have thought of some fun interaction experiments to try out, I take to my sketch book and just start drawing.

    I often find myself initially leaving out or forgetting UI and interaction elements that were in my head but that’s alright. Sketching is a process and doesn’t have to be perfect. Start with a simple outline and iterate on it until you have something more encompassing.

    Keeping your sketches low fidelity is key.. It’s easy to get caught up in the details but do yourself a favor and save all the beveled edges and drop shadows for Photoshop. Jason Fried of 37signals recommends sketching with a sharpie since it’s relatively impossible to sketch in detail.

    Sharpie post-it

    Sketching Tools

    At the very least you’ll need a pencil and some paper, but there are some other neat tools out there that can make sketching user interfaces a bit easier.

    UX Sketchbook – This is one of my favorite tools. It’s a perforated, bound book of paper with pre-printed browser boundaries. It even leaves room for writing notes. There is also an iPhone App Sketchbook to help with crafting mobile interfaces.

    UX Sketchbook

    UX Sketchbook

    Ruler – You also can’t go wrong with a nice ruler. It helps when you need to make a sharp boundary line or guide.

    Pencil – Right now I’m primarily using the GraphGear 500 for my sketches. I prefer a mechanical pencil since I don’t have to deal with sharpening and they last longer than a normal pencil. I do, however, sometimes prefer the softer lines of a classic #2 so I’ll make sure to keep that in my pencil cup.

    Mechanical Pencil

    Drawing Table – I snagged this basic drawing table from Amazon which makes it a bit easier on my back and neck when I’m sketching for extended periods of time. I highly recommend a drawing table if you find yourself sketching often.

    Drafting Table

    The drafting table I use

    Designing

    Once I feel like I have a visual representation of what it is I’m trying to build, I immediately take to Photoshop while it’s all still fresh in my mind and I’m feeling excited about pushing some pixels around.

    Design Tools

    Photoshop – This is pretty much a necessity for any UI designer, though there are alternatives like Gimp, Pixlr or Sketch. Feel free to suggest others in the comments section below.

    Template Starter Kit – I personally recommend using a Photoshop starter template since it just speeds things up. It’s easy to build your own but I use a pre-made one called “Quommunication Starter Kit”. Their website is no longer available but you can download the starter kit here. If this starter kit doesn’t suit you then a quick Google search will uncover some other great options.

    GuideGuide – GuideGuide is a free photoshop extension which I use to manage and generate guides in different column layouts. Honestly, I don’t know how I ever designed without it! I highly recommend giving this extension a try.

    Common design process mistakes

    Think before you design

    Instead of just jumping into Photoshop or breaking out the sketch pad, next time try sitting and reflecting on the design problem that you are solving. Brainstorm fun new types of interactions to try out. Look around on similar websites or services and observe the design decisions they made.

    For some this might be a 10 minute process and for others it might be an hour or more. In either case I believe it is an important step in the process.

    Sketch it out!

    Even if you are taking a sharpie to a post-it note, it is almost always beneficial to draw things out before opening up Photoshop and moving around pixels. Pencil and paper is much more pliable and disposable than Photoshop document. Use that to your advantage.

    User-centered design

    User-centered design is the idea of keeping the user in mind while designing an interface and also involves testing the validity of design assumptions against real-world users. In other words.. if you have a user-base, take advantage of them by running A/B tests and seeing how different interfaces perform.

    Not every designer is in a position to attain real user feedback on new designs but, if you are, I highly recommend taking advantage of it so that you can build a system based more on data than assumptions.

    Conclusion

    So that’s a quick peek into my design process. What does your design process look like? Do you have a way to improve mine? Let me know in the comments section below. Thanks for reading!

  2. 10 Epic Dribbblers That You Should Be Following

    5 Comments

    dribbble

    The quality of work on dribbble is amazing. It’s an great source for inspiration, finding talent and connecting with other designers. I’ve spent quite some time on dribbble lately and wanted to share some of the awesome talent I have found. Here are 10 amazing designers I have had the pleasure of stumbling across:

    Hillary HopperHillary Hopper

    Snuglug

    Hillary has a unique and light hearted design style which I really dig. She uses a lot of bright colors and textures to really bring a fun vintage feel to her work. She is currently a designer at TinyCo and recently launched her new website.

    Kerem SuerKerem Suer

    Kerem UI

    Kerem is an excellent designer with knack for clean UI design and use of whitespace. He has done a good deal of both mobile and web work which is all pretty much outstanding. He has also recently launched a new website.

    TomasTomas Jasovsky

    Hire me

    I was pretty much forced to follow Tomas after discovering his profile on Dribbble. He employs a wide range of design styles, mad attention to detail, and a strangle-hold on color palettes. Checkout his personal portfolio to see more.

    LunarisLunaris

    Warhammer

    I’ve always loved fantasy style web art so Lunaris naturally stood out to me. His designs are uber detailed and indicate a very strong command of both design and software.

    LarryLarry Chen

    Webos

    Head over to Larry’s profile and you will see some great use of color along with a firm understanding of UI design, depth and spacing. His versatility as a designer makes him an immediate stand out.

    DewDaniel Waldron

    Winged Thing

    What I love about Daniel is that his interfaces and logos all have a common theme of cleanliness and simplicity. Many of his designs also have that touch of texture and pinch of vintage. I highly recommend following him on Twitter.

    Eric HoffmanEric Hoffman

    Snapper

    Eric Hoffman is kind of a UI badass. Head over to his profile and checkout some of his mobile work. You won’t be disappointed. I also recommend checking out his website.

    Rayz OngRayz Ong

    Cloud9

    Rayz isn’t afraid of color. Checkout his profile for a landslide of color and creativity. His logos are outstanding and his presentation is great. I also recommend checking out Rayz on Behance.

    TanyaTanya Maifat

    Eco Stuff

    All I can say about Tanya is wow. This girl is an artist first and foremost and it shows in her designs. I highly recommend following her on Dribbble. Need help on a new game? Well you’re in luck because Tanya is a freelance designer. I highly recommend hiring her!

    RileyRiley Cran

    Smash Robot

    I chose Riley for his amazing grasp of typography and vintage style design. Clicking through his profile is like stepping back in time. He has a ton of shots to look through, each one bawler so I definitely recommend checking him out!

  3. 10 Great Photoshop paper effects tutorials – peel, bends, creases, folds, polaroid, shadows and more!

    3 Comments


    1. Peeling Sticker Effect

    Sticker

    This is a great tutorial that shows you how to use the warp tool to create a pretty believable sticker effect. This effect is great for web icons.

    2. Create a Realistic Page Curl in Photoshop

    Page Curl

    This one also uses the warp tool. A great technique for creating 3d page curls.

    3. Creating Old Polaroids in Photoshop

    Polaroid

    It’s hard to find a really good polaroid tutorial but this one works pretty well. It actually supplies you with an old polaroid and shows you how to crop and impose your picture on it.

    4. DIY Advanced Paper Shadow in Photoshop

    Shadow

    This one is one of my favorites. This technique is very popular on the web right now and I find myself using it very often. I would even recommend lessening the shadow just a tad and creating just a hint of that raised, 3d effect.

    5. A Scrap Of Notebook Paper

    Notebook Paper

    I really like this tutorial because it shows you how to build the piece of scrap notebook paper completely from scratch and it looks pretty realistic.

    6. Creating Paper Folds and Creases

    Paper Crease

    This one is pretty simple but ends up looking fairly realistic.

    7. How to make an awesome grungy paper texture from scratch

    Grungy paper

    This tutorial teaches you how to create a cool grungy paper effect. I recommend going through the tutorial with the paper texture he provides and then trying it with your own once you get the hang of it.

    8. Create a realistic grunge peeling sticker

    Grunge Sticker

    This tutorial is a bit different from the sticker tutorial at the beginning of this post. This one is grungy and uses more of a crease instead of a bend. Great effect for both web and print.

    9. Folding Corners

    Page curl

    Another really good page curl tutorial that uses more of a crease.

    10. Glossy Photos

    Glossy photos

    Create a stack of glossy photos.

  4. Free PSD: UI submit buttons for your interface

    Leave a Comment

    Here are some fancy buttons for you to use for you own interface or as inspiration. These are FREE to use for both commercial and personal use. Please let me know if you do end up using them so I can see what you did with them! Thanks for checking it out!

    Button UI

  5. Awesome UI inspiration from great UI/UX and web designers

    Leave a Comment

    Here are some awesome designs and UI that I have stumbled upon recently that I have found very inspiring. I’ll go into brief detail about each item and why I like it. Enjoy!

    Youzee has an awesome “coming soon” page that is functionally innovative and very pleasing to look at. I can’t wait to see what cool UI their service has once they launch!

    Not sure where this one is from but it is an awesome example of elegant UI controls.

    Most of you have probably heard of Sofa. They are responsible for apps like Versions and Kaleidoscope. They have a firm grasp on the balance between good UX and good design. Head over to their website and check it out. You will no doubt be inspired.

    Catch A Pixel has an awesome, yet simple web presence with a very eye-catching header followed my a modest content layout. Definitely check them out!

    What Letout Outlet is a focus on the product itself rather than content. The design is very clean overall and offers very large photos of the product which pretty much tell you all about it without having to read or think too much. Relogik uses this same layout for all of their products so feel free to browse around and check them out!

    At first glance Checkout may seem like a ripoff of Apple.com but it is actually design genius. By recreating the feel of an Apple website, the brand immediately has a trust factor among current Apple users. The design is also different enough that I wouldn’t at all call it a blatant copy. Overall a really good move in my opinion.

  6. Free UI sliders and progress bars for your interface

    Leave a Comment

    Here are some pretty looking UI sliders and progress bars for you guys to use in your own projects or as inspiration. These are FREE to use for both commercial and personal use. Please let me know if you do end up using them so I can see what you did with them! Thanks for checking it out!

    Slider Bars

  7. Creating vector shapes/icons without blurry edges in Photoshop CS5

    3 Comments

    I’ve noticed lately that many of designers are creating graphics and icons using rasterized shapes and gradients. This is fine if you want to make something quick and dirty but you run into a huge problem if you ever need to scale the image up. Since it is made up of completely rasterized shapes, scaling up will cause some intense pixellation.

    Most may not consider Photoshop a vector art program but, if you know how to use it right, creating vector shapes, gradient fills and icons that are completely scalable, is quite simple.

    The problem with vector shapes in Photoshop is that they automatically try to anti-alias themselves when their paths don’t fall on a full pixel. This causes slight variations in pixels and creates a blurring effect.

    This can be fixed easily by altering the paths of the shape to fall on full pixels (represented by the grid). Select the white arrow tool and fix the shape one side at a time.

    The more you zoom in the more precise you can get with the path. You will notice when the path is sitting on a full pixel because the jagged edges will be gone and the path will line up with the grid. When scaling it up you may have to fix some edges that aren’t on full pixels but at least you won’t have to re-create the entire icon!

    I hope this helps some of the frustrated designers out there. Please let me know if you have any questions or improvements in the comments section. Thanks for reading.

  8. Creating a repeating website background texture in Photoshop

    Leave a Comment

    Prerequisite: You are familiar with Photoshop and the clone tool.

    Part of optimizing your website for all browser types and monitor resolutions can include creating a repeating texture that will scale to fit any monitor size. I’m going to show you my technique for creating a texture that can infinitely repeat width-wise from a basic non repeating texture. I’m open to pointers or workarounds though if anyone out there has anything to contribute.

    The starting texture

    Starting Texture

    This is just a standard wood texture that does not repeat. It has a lot of marks and blemishes that interfere with each other making it impractical to use this as a background.

    You can see that if we try to repeat this texture to the right, we end up with quite a few issues that are fairly obvious. So here is how I deal with a texture like this.

    Step 1: Cut the image in half

    First thing we need to do is to create 2 layers from this image by cutting it in half. You can do this easily by selecting the Rectangular Marquee Tool in the Tools Palette. At the top toolbar you will see “Style:”. Set that to “Fixed Size”. Then, since our texture is 468×468, set the marquee to 234×468. This way, when you drag out the marquee, it will automatically divide the image in half.

    With the texture’s layer selected in the Layers Palette, right click the image and select “Layer via Cut”. This will create 2 layers where the marquee was outlining.

    Step 2: Flip


    Now that the image is divided up into 2 separate layers, select the layer in the Layers Palette that contains the left side of the texture.

    Once you have the layer selected, go to Edit >> Transform >> Flip Horizontal. Then go ahead and flip the right side horizontally as well. This will flip the left side of the image horizontally, creating our unsightly repeating texture line in the middle of the image.

    Step 3: Fix the problem areas

    The next thing we need to do is to blend the two sides of the texture together, getting rid of the seam. First we need to select the both of the two layers that we created (you can select both by holding ctrl as you click them). Then right click on the highlighted layers and select “Merge Layers” at the bottom of the menu.

    Now select the Clone Stamp Tool from the Tools Palette. Change the brush size to somewhere between 10 and 15. The goal is to blend the two textures together as seamless as possible. So start blending the texture one area at a time. Try to sample from random areas on the image to reduce texture repeating.

    Conclusion

    Now you have a texture that can repeat-x seamlessly off into infinity. If you would like to make this texture repeat both x and y, repeat this tutorial but divide the image in half on the width-wise instead of height-wise. It is usually a tad more difficult, however, to make a texture repeat-x so I may create a tutorial for that later on. Please feel free to leave any comments or criticism. Thanks for reading!