All posts in: Photoshop (PSD) Files
Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Website template preview

Fully editable gallery website template in Photoshop (PSD) format

When it comes to visual design, I often try a lot of different things before settling on one clear direction. This photo gallery website template is one such example. I created it back in 2009 just as I was starting to plan the Norebbo online presence, and as you can see, I was actually thinking about building my own custom image gallery site. I was pretty excited about doing everything myself and created three page templates in Photoshop before I realized how much of a nightmare it was going to be without a CMS (content management system) behind it to manage everything. I’m not code guy at all, so while I wouldn’t have any problems building the structure in HTML and CSS, I would have a ton of issues managing it over the long term. That’s when I discovered the power of WordPress, and the rest is history.

This website template includes a homepage, gallery page, and text page. It was designed to showcase a large collection of images in a very clean and simple way, making them the primary focus of the design. It’s built around a simple grid system, with rectangular modules that can be inserted and removed however you want to do it. There’s even blank modules for advertising images and banners.

Now that I have no need for it, I thought I’d offer it here to anyone who would like to use it. And sorry, HTML and CSS is not included. That’s probably just as well because I’d imagine you’d want to do a lot of personal customization to it anyway.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

One of the advantages of working with a picky client is that I usually end up with a lot of cool “extra” graphics and parts that don’t make it into final design layouts. Such is the case with these progress bar designs. It’s actually just one design – the top version is the active state, and the bottom is the inactive state. My thought was that when the progress bar became active (per my client’s specs), it would be visually enhanced to show an outer glow, glossy reflection, and status text beneath. An added bonus would be a tag-style callout to show critical points or information.

You could probably do anything you want with the colors – as a matter of fact, I tried this in a multitude of vibrant tones and it held together pretty well. But it just so happened that my client’s UI is dark gray.

Even though I designed these to be download progress bars, they would also work well to be loading indicators too.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Designing parts and pieces for touch screen mobile devices is a lot of fun. As a matter of fact, it’s pretty much all I’m doing these days – not really by choice, but mostly because it’s a hot sector right now that everyone its trying to get in on. Seems like most of my incoming work requests are from folks designing a mobile app.

Anyway, here are three different styles of a simple on and off toggle switch that I was recently working on. The goal was to design a list item that could be turned on or off (think of a settings menu). It’s difficult to think of new ways of doing such common every day buttons and switches, but I really like my horizontal light switch concept (at the bottom of the page).  It fit really well with my clients UI, but we both felt that it was a bit too over the top and not as simple as a simple slider element. So I tried two versions of sliders: a small one that fit directly within the list item, as well as a version that made the entire list item the slider. I also made one more concept, but I can’t show you that because that’s the one they picked…

Anyway, click on the image above to download the fully editable Photoshop PSD file.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

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!

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Perhaps I’m just getting burned out on creating 3d illustrations of conceptual objects, but I’ve been producing a LOT of generic website and advertising banners lately. They come in pretty handy as stock graphics for a variety of uses, which can include web templates, business cards, advertising banners, and posters. I always like to have a bunch of these things on hand for those last minute assignments to help save time during conceptual development.

All of these are in a landscape (horizontal) format, and I’ve also got an assortment of vertical banners that I’ll upload eventually.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Most people probably don’t know this, but my bread and butter is website design. That’s what I spend the most of my time doing, and I have a full list of great clients who keep me very busy. And like any other busy web designer, I’ve got my fair share of web templates and website elements that never made it to final production. Case in point: these five website banners. They were part of a large collection of concepts I made for a client a while back, and these are the rejects. Shame to let them go to waste, right?

Feel free to download and use however you wish. They are all fully editable (requires Adobe Photoshop).