Author Archives: Pixel Grinch

About Pixel Grinch

Something

Mobile Website Design / Development Project


ubmobile_home

I designed and developed this mobile website for the company I am currently working for. This is not a mobile app, this is a website optimized for mobile devices. I created the entire UI, layout, design, front-end code, back-end code, ColdFusion logic, MS SQL database queries/inserts/updates, javascript code, support of Google Map API, SEO optimization.

Continue reading

Facebook App: Company Job Openings

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.

ub_facebook_careers_app

Tools/Skills Used:
Facebook API, Facebook App wrapper, Layout, UI, UX, ColdFusion, MS SQL, HTML, CSS, JavaScript

Requirements/Considerations:
Native Facebook feel

Metro Tasks For iPad

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

metrotasksuielements

Above screenshot showing a collection of a few custom ui elements I have created.

metrotaskappiconThe application icon in various non-Retina resolutions.

metrotasksland Lanscape ScreenshotmetrotasksportPortrait Screenshot

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.

 

Vector Icon Marathon Project

winxplookalikeicons_500x114

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.

Tools/Skills Used:
Adobe Illustrator, Wacom Tablet

Requirements/Considerations:
All icons need to be available in vector form for easy resizing and use for the web and print.

 

Tooning you @ Just Mobile booth at the CES 2012 in Las Vegas, NV

Carolyn Martin

ces2012jmcarolynmartin

Sérgio Miranda

ces2012jmsergiomiranda

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

Tooning you @ Just Mobile booth at the IFA expo 2011 in Berlin, Germany

Cali Lewis

ifa2011jmcalilewis

 

John Pozadzides

ifa2011jmjohnjohnpozadzides

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

Pen Turned Into A Low Poly 3D Model

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.

3drenderpenwireframe

A low poly model I created from my pen.

3drenderpensimple

A simple render without using any textures.

Tools/Skills Used:
Maxon Cinema 4D

Magazine Ad for chillingo

chillingoppcmagonepagead

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

Website Makeover: chillingo

Before:

chillingo_before

After:

chillingo_after

Chillingo asked to give their website a new face lift. I began with the mockups and after a few revisions chillingo approved the mockup and I began with the detailed layout, markup (HTML), styles (CSS) and animated eye candy (JavaScript).

All my work for chillingo was done before they have been acquired by EA (Electronic Arts).

Tools/Skills used: Adobe Illustrator, HTML, CSS, Javascript.

14×14 Mini Icons

14x14miniicons

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.

Tools/Skills Used:
Adobe Photoshop

Challenges/Considerations:
To accommodate for the resizing factor I used shapes which are like vectors for all of the 14×14 icons.

A Web Accessible Portal For Corporate Customers

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.

allianceportal_login

Login screen shown in the screenshot above (click on the screenshot for a full size preview).

allianceportal_myspaces

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.

allianceportal_incvoices

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.

Tools/Skills Used: Adobe Photoshop, Adobe Illustrator, CSS, HTML, ColdFusion, MS SQL, JavaScript, jQuery

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.

PixelGrinch v4

img_pixelgrinchwebsite

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.

Tools/Skills Used:
Adobe Illustrator, Adobe Photoshop: Mock-ups, layout, ui, images, icons, designs, photos
HTML, CSS, JavaScript, jQuery : Markup, front-end, layout
PHP: Programming Language I used to create the CMS
MySQL: Database backend I used for the CMS
SEO: content, schema.org, Google Analytics

Task Icon For iOS

taskiphoneicon

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

Tools/Skills Used:
Adobe Photoshop

Challenges/Considerations:
I used primarily shape layers to easily create the various resolutions  for this app icon.

Climate Control Icon

climatecontrolsketch

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.

shot_1282843353

From sketch to vector. This is the final result.

Tools/Skills Used:
Adobe Illustrator

Pink Ribbon

pinkribbon

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.

colored_ribbons

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)