Two 480×800 mobile UI templates for Android

Posted on January 16, 2012 by Norebbo


Yeah, I’ve been pretty busy lately. I mean…REALLY busy. It’s the sort of busy that makes me feel guilty for spending too long in the bathroom, and there just aren’t enough hours in the day to do everything I need to do. But I do see some relief in sight, so that’s the only thing keeping me hanging on. A Hawaiian vacation would be epic right about now…

So what has been keeping me so busy over the last month or so? Mobile UI design, and a whole lot of it. I had a client who was looking to re-skin their existing Android app into something more “clean and white, with glowing blue elements”. I ended up generating about 10 initial design concepts for them to choose from, so we had a lot of good options before really digging into the nuts and bolts of the re-skin. The end result turned out rather nice, and I’ll try to show the final designs here once it’s officially released.

Because of the large amount of initial concepts I generated, I’m now sitting on a handful of perfectly good mobile phone UI templates that don’t have a home. I’m keeping the best ones for myself to use on future projects (sorry!), but I thought I’d throw up a couple of them here on norebbo.com for anyone who’s interested.

So…here are two fully editable mobile phone UI templates in Photoshop (PSD) format, and they are free for the taking. I guess the best way to describe them is “white and clean” – they are totally generic, but do feature some blue highlights here and there. Please use them however you wish. Both are high resolution 480×800 layouts which works perfectly for Android devices. Converting these to landscape formats shouldn’t be too difficult if you’re handy with Photoshop.

Enjoy!

Posted in Mobile UI Templates | Tagged , , | Leave a comment

Six free radar screen illustrations

Posted on December 13, 2011 by Norebbo

I just wrapped up another assortment of 3d illustrations featuring radar screens, and here are six from that set. It’s an eclectic collection, with objects that I’ve used quite a bit in the past. If I can ever find the time, I really need to start working on some new objects…I feel that I’m nearing the end of the rope with my current catalog of 3d models! Unfortunately, there aren’t enough hours in the day to do everything I want to do…

I really like using the radar screen as a base for my illustrations though, mostly because it’s a highly visual element that becomes sort of whimsical in nature when paired with other objects. It’s these kinds of whimsical illustrations that keep me interested in stock image production – if I was making only plain objects I’d most certainly go nuts.

Anyway, here’s a brief description of this set:

  • A green radar screen protruding out of an open file cabinet drawer
  • A green radar screen embedded into the side of a metallic file folder
  • A medical symbol integrated into a green radar screen
  • Two dumbbells lying in front of an upright radar screen
  • A radar screen hovering inside of a large chrome start symbol
  • An upright radar screen surrounded by a velvet rope barrier
Posted in Free 3d Renderings | Tagged , , | Leave a comment

Six free Object Icons with radar screens

Posted on December 9, 2011 by Norebbo

This stuff just won’t die! I have to admit that I’m getting a little burned out on these “Object Icon” renderings – you know, the ones that feature one main object sitting on a bright white background with another smaller object in front of it. I think I made my first one back in 2007 or so and people tended to like them because they could be cut out from the background and made into icons. I didn’t really intend them to be icons, but that’s how most people started using them.

Anyway, I have been getting a ton of requests to make a series of these object icons with a radar as the secondary object. So – here you go! It’s actually kind of a good idea I suppose – I wish I could take credit for it, but the idea of using a radar graphic in these Object Icon renderings seems to make a lot of sense. I guess as long as there is still demand for these, I’ll keep the production line open.

Here’s a more detailed description of the images that are included in this set:

  • A small radar screen in a thick metal frame standing in front of a large desktop calendar over top of a white reflective surface
  • A small radar screen in a thick metal frame standing in front of a large clock over top of a white reflective surface
  • A small radar screen in a thick metal frame standing in front of a large globe over top of a white reflective surface
  • A small radar screen in a thick metal frame standing in front of a large brass padlock over top of a white reflective surface
  • A small radar screen in a thick metal frame standing in front of a large red and white lifesaver over top of a white reflective surface
  • A small radar screen in a thick metal frame standing in front of a large audio speaker over top of a white reflective surface
Posted in Free 3d Renderings | Tagged , , | Leave a comment

Design Title Illustrations

Posted on December 6, 2011 by Norebbo

I was creating some 3d illustrations for a presentation a few days ago, and I thought that maybe some of you might be interested in using these for your own projects. They are great for being used as title graphics, mainly because they are far much more interesting to look at than plain text. And we all know that’s really important when it comes to keeping your audience focused on the presentation.

The large image above was the lead-in for the presentation, which happened to be based around the my thoughts on the keys to great design. Is there any image more appropriate for that than an illustration of a key lying next to the words GREAT DESIGN over top of a generic blueprint? I think not – so that’s what I built. It’s times like these that I’m glad I know my way around a 3d modeling program. Even if my presentation was dull, I hope I kept everyone entertained with the pretty pictures.

I also discussed topics about website and logo design, as well as methods for basic design intelligence – so I created images for those too. All of them have the appropriate chrome words with a wrench and screwdriver lying over top of a generic blueprint. Feel free to use any of these images however you wish. All I ask is that you do not redistribute them without my permission.


Posted in Free 3d Renderings | Tagged , | Leave a comment

45 internet and mobile technology icons

Posted on November 14, 2011 by Norebbo



I’ve been debating whether or not I even wanted to upload this set of 45 technology icons, because vector illustration is something that I am not comfortable with at all. However, being a visual designer means that I’m going to have to flex my vector illustration muscles every now and then whether I like it or not. Such is the case with this icon set.

I made this set a couple years ago for a client who was launching a mobile-themed software app. In addition to the standard mobile-specific icons (battery level, signal strength, search, etc), they were in need of a handful of other random glyphs to represent some of their proprietary features. That’s why you’ll notice the totally random objects in this set, including items such as a cowboy hat, a running man, and a paint bucket. Yes, an eclectic set it is. Unfortunately, the app was never released so these icons never found a home.

This is a two-color icon set. White is the base color, and I used an orange-ish yellow to highlight the important element(s) in each object. Each one is very simple – these are essentially very basic line drawings without a lot of extra detail. In that regard, these are better suited to be scaled down to small sizes as opposed to be blown up and shown large.

This icon set is broken up into three separate zip files. Each contains one Adobe Illustrator (.ai) file, and an Adobe Illustrator EPS (.eps) file in CS3 format.

Posted in Free Vector Illustrations | Tagged , | Leave a comment

Vector kitchen appliance drawings

Posted on November 12, 2011 by Norebbo

I was organizing some of my old project files last night, and I came across these vector kitchen appliance drawings that I made about eight years ago. I hate to leave stuff like this locked away in my archives, because I feel like it’s a waste to keep them for myself when there is probably someone else out there that could put them to good use.

Anyway, this is a set of four individual kitchen appliance drawings combined into one file. Theres a microwave, oven, and dishwasher (all with open doors) – plus a stacked double oven too. Each of these illustrations are completely generic, which means that there are no identifiable logos or style characteristics that associate them with real products.

Clicking on the image will take you directly to the zip file, which contains two vector drawings: one is in Adobe Illustrator (.ai) CS3 format, and the other is in EPS (.eps) format. Feel free to use these images however you wish. Enjoy!

Posted in Free Vector Illustrations | Tagged , | Leave a comment

Quick Tutorial: Direct selection of layers in Adobe Photoshop

Posted on November 11, 2011 by Norebbo

Direct selection of layersTo some, this may seem like a total “duh” tip – but you wouldn’t believe the number of people I run into that don’t know that you can directly select layers in Photoshop (from your canvas) without having to wade through the layers window. I am somewhat ashamed that even I didn’t know this until a few years ago. Immediately upon discovery, I couldn’t help but to think of all the wasted hours I had spent scrolling trough the layers dialog in search of elusive layers that I was too lazy to name.

So what’s the trick to selecting layers directly from the canvas? It’s actually very simple, and I can explain it in a few simple steps:

  1. On your canvas, hover over the element you want to select the layer for.
  2. If you’re on a Mac without left and right mouse buttons, hold down the “control” key and click the mouse. Or, if you are using a mouse with left and right buttons, right click on it (works on both Mac and PC).
  3. A dialog should appear, showing you a list of all your layers located at that spot where you clicked, with the layer of the element you selected already chosen for you.
  4. Click on it, and…voila! You have just selected that layer without even having to navigate inside your layers window.

This is a total lifesaver for those times when you receive a complex PSD file from someone else who hasn’t taken the time to organize and name their layers. As a matter of fact, that’s actually what led me to discover this little trick. I was up late one night fighting my way through an edit of a PSD that I had received from another designer, and in a fit of frustration, the smashing of the keyboard and simultaneous clicks of the mouse somehow magically aligned to reveal this handy little shortcut. I was like, “Whoa! How did I do that??” Then I spent the next 10 minutes trying to recreate those key and button smashing combinations before I finally gave up and summoned the power of google to find an explicit description of the shortcut. My life as a designer was forever changed from that moment on.

Posted in Photoshop Tutorials | Tagged , | Leave a comment

Why are non-designers so afraid of the color gray?

Posted on November 9, 2011 by Norebbo

If there is one thing that I struggle with when designing for my clients, it’s the debate that usually sparks when I present concepts which use gray as the base color. The argument typically heard is that gray is too dull and drab, and they prefer to see concepts with “lots of color” instead. Don’t get me wrong – I like color. A lot. There’s an art to developing inviting and cohesive color palette which emphasize mood and emotion, and that’s one of my favorite parts about being a designer. However, I draw the line at adding lots of color just for the sake of making something colorful.

My design philosophy is based around the premise that color needs to have a purpose. I like to apply my color palettes in a way that promotes good usability as opposed to aesthetic reasons alone. For example, the color red should should be limited to alert-type elements, and green usually is left for confirmations and metaphors of “success”. I know that’s an overly simplistic example, but I think you get my point. There’s usually a lot of thought that goes into deciding how a color should be used.

The reason for my tendency of using gray as a base color is that by doing so, I can indirectly focus the users attention on what matters. For example, if I’m designing a menu with some very important buttons that are critical to the flow of the user interface, those buttons need to stand out from the rest of the design. If everything else on the screen is as colorful as that very important button, a conflict occurs when there’s no clear indication as to what element is important and what action needs to be taken. By keeping the framework and all less important elements of the UI in gray tones (or other neutral colors), I can use color to draw attention to the things that are most important.

As a Mac user, one of the most common complaints I hear from others (mostly non-designer types) is: “Why are all the icons in the OSX finder gray? It’s so boring!” (see Figure 1). I hear this over and over again, and honestly – it really irritates me. I’ve never heard a formal explanation from the OSX development team as to why they did this, but I think I have a pretty good idea why: it keeps clutter to an absolute minimum, and this is especially critical when doing creative work. No matter what kind of stuff you’re doing (image / video editing, 3d rendering, illustration, etc), you want to focus on your work – and not be distracted by visually strong UI elements. At least I don’t want to.

Honestly, the color gray doesn’t automatically equate to “boring”, “dull”, or “drab”. Used properly, it can enhance the overall user experience of a complex product by helping to define zones of focus. I’m sure this is something that I’ll never have to stop explaining to clients, but no matter – I enjoy defending my philosophy about design and the way I approach my work.

Posted in Design Discussion | Tagged , | Leave a comment

Six free glowing blue data pulse illustrations

Posted on November 8, 2011 by Norebbo

Here are the last batch of my data pulse illustrations – after this there, are no more! Well, there’s always the chance that I’ll make some more, but I’ve been busy with other design projects lately (so don’t hold your breath). As always, you are free to use these images however you wish, but all I ask is that you do not redistribute them without my permission.

Here are some brief descriptions for each of these six images:

  • Two large AA batteries lying in front of a framed glowing blue pulse graphic
  • A data pulse graphic embedded into the side of a silver file folder with rivets
  • A circular blue data pulse graphic standing behind a simple white two-story house
  • A dense array of binary digits orbiting around a glowing blue data pulse
  • A data pulse graphic in a circular frame surrounded by a velvet rope barrier
  • Two large dumbbells lying in front of an upright glowing blue data pulse graphic
Posted in Free 3d Renderings | Tagged , , | Leave a comment

I finally figured out why I typically don’t like to customize the things I own

Posted on November 7, 2011 by Norebbo

Ive mentioned a few times before that I am a die-hard car guy. I love cars, and have held the interest my entire life. That love for cars led me to persue a career in automotive design during college (which I ultimately decided against), but I have always had great interest in beautiful cars.

But one thing that I’ve never had much interest in is customizing my cars (or other products that I own) to my own specific taste. Every car I have ever bought has remained stock – just as it came from the factory. To be honest, I have always thought this was kind of weird considering that I am a professional designer and I like to surround myself with beautiful things. Why am I against going against the grain and doing my own thing?

I was reading a few online car forums last night (as I always like to do in my spare time), and I had an epiphany of sorts as I was browsing through user-submitted galleries of customized cars. Basically, it comes down to this: most of the high-end things that I buy are carefully researched, and I have chosen them because I consider them to be finely designed products crafted by professionals who pour their blood, sweat, and tears into them to make them as good as they could possibly be. Why spoil that? As a designer, I know what it takes to develop a great product, and then watch in horror as users add their own personal flair to it. Most of the time, it evolves into something I no longer wish to have my name attached to.

Nearly everything I own is stock. My car, my phone – even the walls in my office are relatively bare. Of course there are exceptions, but nearly all of the time, I can’t bring myself to spoil the lines (or soul) of a great product that has had all of it’s parts designed from the ground up to work together in harmony with one another. And I tend to think that a lot of other designers feel this same way – at least the ones I have worked with over the years. Of all the people I’ve known in my life, I have noticed that it’s always the non-designers who are hell-bent on tinkering with things to “make them better”.

I think it would be fun to do formal research on this. But for now, I’m just glad that I am starting to understand the reasoning behind my nerdy behavior.

Posted in Design Discussion | Leave a comment