I designed and developed a Facebook App page to show all current company job openings to extend the reach from the company website to the Facebook network. I connected the page to the company server through remote calls to get current job information.
I decided to follow the Facebook UI/UX guidelines to mimic a native Facebook experience. I recreated all necessary CSS styles that are also retrieved remotely from the company server. I added a simple way of filtering the results by state and job title.
Native Facebook feel
The client asked to create an entire user interface and art work for their new iOS app, Metro Tasks.
They requested to have everything available on the screen without the user ever being distracted by a slide in/out, etc. It was about getting things done without distraction. They requested folders around a desk feel and the folders should have some depth to them. Every single element is custom made from scratch (Except the Facebook and twitter logo).
Above screenshot showing a collection of a few custom ui elements I have created.
Tools/Skills Used: Adobe Illustrator, Adobe Photoshop
Requirements/Considerations: All shapes had to be created in a vector like fashion to avoid having to redo most the work when it is time to create the retina version of the icons. My approach was to start with the smallest resolution first and then migrate to the largest resolution by adding additional detail.
The client asked me to create icons that needed to be resizable and usable for desktop, mobile, web and print.
I created these icons about 7 years ago. The screenshot only shows just a few of the 400+ icons I created.
Every single icon was custom made from scratch.
Adobe Illustrator, Wacom Tablet
All icons need to be available in vector form for easy resizing and use for the web and print.
Chillingo asked me to create a geiger like interface for their planned iOS app.
I went ahead did some research and started creating the user interface (UI). Every single element has been created from scratch.
After the success at the IFA 2011 in Berlin, Just Mobile invited me again to do the same for them at the CES 2012 in Las Vegas. This time around I demonstrated their AluPen Pro which is slimmer and offers some added features.
It looks simple and clean but it took me months to perfect this cartoon style.
Tools/Skills Used: iPad 2, AluPen Pro & AluPen, Autodesk Sketchbook Pro
I love to turn people into cartoons.
Just | Mobile ( creators of award-winning design objects for iPhone, iPad and Mac ) thought it would be a great idea to have me draw people live at their booth on the IFA expo in Berlin, Germany to demonstrate their new AluPen with the iPad.
It turned out to be an effective marketing idea and I created over 100 cartoons.
Tools/Skills Used: iPad 2, AluPen, Autodesk Sketchbook Pro
A couple years ago I started learning 3D modeling. My current job doesn’t require me to use my 3D skills and there aren’t any requests coming from my own clients. That said I like to keep up to date on it and model away when I get a chance.
A low poly model I created from my pen.
A simple render without using any textures.
Maxon Cinema 4D
Chillingo (chillingo.com) emailed me letting me know that they just got a last minute deal on a full page ad for the iPhone Life magazine. Having done previous work for them, he asked if I would be interested in creating the ad. They explained the biggest challenge is to get this ad done within the next 2 hours.
I asked if they had any requests for the layout or any direction. They said: ‘it is all you, all we have is screenshots of the apps we want featured in the ad’.
I agreed and said: ‘let’s do this.’
Chillingo sent me the specs for their printer, document dimensions, and screenshots of the apps they wanted to see in the advertisement.
I aimed for a clean look with a simple flow, trying to Guide the eye from the game screenshots to the top where the logo is located at and finally back down to the headline and text.
In an effort to get the readers attention I tried to visually break the ‘flow’ by placing one of the devices in a different angle.
chillingo loved the ad, so did the founder of the iPhone Life magazine. He mentioned that if I ever need some additional work, he has plenty available. I thought that was pretty awesome.
Tools/Skills Used: Adobe Illustrator
Challenges/Considerations: 2 hour deadline
All my work for chillingo was done before they have been acquired by EA (Electronic Arts).
I love tiny icons especially when they are crisp and don’t need any explaining in regards of their purpose. A client needed some 14×14 icons with the option of being able to easily resizing the icons on their end.
This is just a select selection of the over 200 icons I created for the client.
To accommodate for the resizing factor I used shapes which are like vectors for all of the 14×14 icons.
I created the portal for our corporate customers that is accessible through the web. I created the ui/ux design, the front-end code and the backend logic including the database connectivity. The design elements are custom made.
I focused on simplicity while keeping a professional appearance.
Login screen shown in the screenshot above (click on the screenshot for a full size preview).
The screenshot above shows the overview of spaces rented including details (click on the screenshot for a full size preview). The focus here was to make it feel like a spreadsheet. This screenshot shows the scrollbars at the bottom and to the right, indicating the position of the viewport in relation to the document. A live search and sort feature (with the ability to do multiple column search) has been integrated as well.
The screenshot above shows the invoices section which allows the client to download that data as a PDF file or as an Excel file (click on the screenshot for a full size preview). Search and sort feature are available as well.
Requirements/Considerations: Older browsers needed to be supported due to the nature of different corporate IT setups. Internet Explorer 8 and up needed to be supported. Other modern browsers needed to be supported as well (Firefox, Chrome, Safari). The iPad needed to be supported since it was used to demonstrate the app on trade shows.
This was the most recent version of my website.
I created the entire site from the ground up. Every aspect of it was custom made. I created the design, ui, icons, front-end code, back-end code and developed the entire content management system (CMS) from scratch using PHP and MySQL as database backend and rounded it off with with SEO optimized content and markup. The CMS was simple but did all I needed it to do and it was blazing fast since it had only the features I personally needed.
Adobe Illustrator, Adobe Photoshop: Mock-ups, layout, ui, images, icons, designs, photos
PHP: Programming Language I used to create the CMS
MySQL: Database backend I used for the CMS
SEO: content, schema.org, Google Analytics
The BVG Berlin approached me to create a sketch like illustration for their transportation combo (bus, tram, u-bahn/s-bahn).
Tools Used: Adobe Illustrator, Wacom tablet.
Creating this iOS icon was a lot of fun. The base shape was obviously the checkmark. I was given entire freedom for this project, the only restriction was to keep the shape of the checkmark icon. The question was, how can you possible add ‘zing’ to a boring checkmark?
With that question in mind I started by placing the checkmark into a round shape which helps ‘smoothen’ out those pesky sharp edges of the checkmark shape.
In regards of the ‘zing’ I decided to surround the circle with non distracting colors and went with a nice punch of blue for the checkmark and circle element. After adding some depth it really turned into an attractive checkmark icon with ‘zing’.
I used primarily shape layers to easily create the various resolutions for this app icon.
A series of simple web/print icons for a client I am working on. Here a sketch of the first one. The icons are representing different conditions for rental storage units. This one represents climate control which keeps the storage unit within a defined temperature range throughout the year.
From sketch to vector. This is the final result.
I met a breast cancer survivor, and what an experience. Breast Cancer Awareness Day was around the bend and I created a pink ribbon to honor that day. I haven’t really found any nice ribbons so I created one myself. Later I added different color variations to cover many other awareness categories.
I used Adobe Illustrator to create the ribbons. On request I converted the pink ribbon into many different formats. As matter of fact why don’t you go ahead and download your own copy right now.
Tools/Skills Used: Adobe Illustrator, Adobe Photoshop (for the various format exports and size conversions used to create the downloadable package)
I created this mascot for a client that owns a WindowsMobile Store. On request I created a weekly comic (6 frames) for their sales paper.
Adobe Illustrator, Wacom tablet.