PHUN BY : PETER RADOMSKI A THEME FOR iOS CONTENTS STATEMENT . . . . . . . . . . . . . . . . . . . . . . . . . . RESEARCH . . . . . . . . . . . . . . . . . . . . . . . . . . . SKETCHES . . . . . . . . . . . . . . . . . . . . . . . . . . . ICON CREATION . . . . . . . . . . . . . . . . . . . . FINAL PRODUCT . . . . . . . . . . . . . . . . . . . . GETTING PHUN . . . . . . . . . . . . . . . . . . . . . . CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . 3 5 7 9 13 20 27 STATEMENT The idea behind my thesis can be summed up in a two words: “Legibility” and “Personality”. At the beginning of the semester, I accidentally stumbled upon a pixel artist’s blog and I immediately became enthralled by the medi- um. The artist whom I was looking at made artwork with a set of limitations imposed by himself, but the image the artist was depicting was immediately clear, and the result was fun, unique, and had a ton of personality. This made me ask the question “How could I apply this style in the field of Graphic Design?”. I immediately realized that I could attempt to create an iOS theme that had the set limitations of a low-resolution, in an attempt to challenge my skills with legibility, and further my understanding in what can be done with these limitations without sacrific- ing legibility, fun, uniqueness, or personality. With PHUN, I aimed to make a theme that says something about the user using it, that being that they not only appreciate the style Pixel-Art of GUI’s and the clarity of those icons, but they enjoy to have a phone that is aesthetically fun as they, the owner of the phone, are. 3 4 RESEARCH 5 5 6 My research began by looking at early examples of GUI, more specifically, the GUI found on none other than Ap- ple’s Macintosh from 1984. The designs found here, are low-resolution, but achieve my goal of legibility. Things such as folders and documents, look like their real world counter parts, the Trash Can is immediately identifable as such. The clarity and legibility of the icons that only made use of black and white was inspiring and taught me the importance and impact that each of these single pixels had in communicating what the interface elements were to the user. Since these icons were so limited, they only include what is absolutely necessary to communicate Jumping forward 23 years to 1997 and Mac OS 8, the icons included color, but still maintained a low-resolution (albeit higher than the GUI found in 1984) “Pixel-Art” appearance. This era was the sweet spot for legibility and uniqueness in low-resolution GUI. Icons and UI elements are immediately clear, but they include col- ored shading, and even small details such as shadows or even mock lines of text on documents and files. These icons perfectly strike the balance in low-resolution GUI, maintaining legibility without sacrificing personality and uniqueness of the icons and UI elements. Due to this, this the era that would serve as inspiration for PHUN, giving room to inject personality into my set of icons. Mac System 1.0 ( 1984 ) File File Trash Can Trash Can Mac System 8.0 ( 1999 ) 7 8 SKETCHES My sketching and ideas for icons were sketched without the limitations of the low-resolution. I sketched what I imagined would be clear icons for the various applica- tions, and once I brought these ideas to the computer, I began to cut out whatever was exsessive, without strip- ping the ideas of their personality and uniqueness. 9 7 10 ICON CREATION My process for creating these icons included the pre- viously shown sketching, followed by bringing the ideas to life digitally. To do this, I used a program called “Ase- prite”, which is a program deticated to making pixel-art. My limitation was a 40 x 40 grid of pixels. Each icon was created by individually placing each pixel, to create the icons and UI elements. The basics of my process were... STEP 1 : I first start with the basic shape of the object. While making PHUN, many of the icons I made are created from a base of a geometric shape. For instance, this “Angry Birds” icon, which began with a simple red square. Next, I add or subtract from the base shape and outline the icon. In this case, I added the poof of hair that appears on the top of the “Angry Bird”. Following this, I go ahead to make the features that appear within the confines of the outline, in this case, the face, beak, and belly of our bird friend. Once all of the features are completed, I work on the details of the icon to make those features pop. This includes adding highlights and shadows on the icon. STEP 2 : STEP 4 : STEP 3 : 11 12 FINAL PRODUCT The following pages, showcase the final icons and UI that I created for PHUN. This includes many icons, ranging from stock applications to popular third party applications found on the app store. 14 13 16 15 18 17 20 19 Lock Screen Clocks GETTING PHUN! Seeing the UI elements and Icons in use is much different than seeing them isolated on a white page, as was previously shown. The following spreads showcase PHUN in use, screenshots of an iPhone before and after the phone and the own- er of it “ GOT PHUN ”! Original PHUN for iOS 22 21 Original Original PHUN for iOS 24 23 Original Original PHUN for iOS 26 25 CONCLUSION 27 PHUN for iOS was a passion project. Through my The- sis, learning about the origins of pixel art, UI, and Icon design opened my eyes to how important legibility is when dealing with low-resolution design. It also taught me that it does not mean that working at such a resolu- tion will produce design that is uninteresting to look at or sterile. The full 200 icons and case study can be viewed on my blog : peterradomski1.wixsite.com/projects PHUN DESIGNED BY PETER RADOMSKI IN NEW JERSEY. ASSSEMBLED IN THE USA. VERSION 1. ID : VCDS401-02FA ‘17 A THEME FOR iOS