Month / November 2015

The truth is, most of the testing I’ve run shows the iPad Pro isn’t faster than a current or even two-year old Core-class Intel CPU. (Atom, now that’s another story.)

We human beings interact with things like computers, tablets, and smartphones on a hardware plus software level. No matter how fast the hardware is if the software is not developed to take advantage of it and in a way that we can use and delight in, then what’s the point?

I recently started capturing videos of our church’s sermons. I’ve been using my iPhone 4s with an olloclip telephoto lens that gives me a 2x optical zoom. In 720p mode a 50-minute video takes up about 4-5 GBs. Capturing the video is no problem, even for an old iPhone 4s. (Capturing 50-minute long 720p videos on a Samsung Galaxy Note 4 on the other hand is a pain — I couldn’t do it because of file size limitations. I’m sure there is a solution out there, but I think regular users who just want to record long videos will give up.) What takes a lot of computing time is adding title pages, transitions, and then exporting it.

On a 2.8GHz Core 2 Duo MacBook Pro (mid-2009) with 4GB RAM and a 5400RPM 1TB hard drive using the GeForce 9400M GPU the exporting part takes about 3 hours. This is using Final Cut Pro X.

I also have an old Lenovo Thinkcentre S20 with a 2.93GHz Xeon W3540 CPU, 4GB RAM, a 1TB 7200RPM hard drive, and a NVIDIA Quadro FX4800 GPU. Rendering using this setup take a little less time than on the MacBook Pro, but for some reason Premiere Pro has a problem with video captured by iPhones: toward the later half the video and audio starts to diverge. This is a known problem with solutions that don’t work. I’ve tried using Handbrake and re-encoded the videos using non-variable bit rates, without success. The only solution has been to use Final Cut Pro X on the MacBook Pro.

On a whim, I decided to try editing on iMovie on my iPhone 6s. I don’t require a lot of editing — just adding a couple of title pages, some transitions, and a bit of zooming in — and iMovie, after watching a few YouTube tutorials, was sufficient for my needs. What was surprising was how quickly iMovie exported. I’d say it took about 10 minutes.

I am definitely not saying the iPhone 6s is exponentially faster than a Core 2 Duo MacBook Pro or a Xeon workstation when it comes to video encoding. But what I will say is the iMovie and iPhone software hardware combination beats out the Final Cut Pro and MacBook Pro combination by a mile when it comes to encoding video, if all you need to do is add a few title pages, transitions, zoom in, and export to a file you can upload to YouTube.

If the iMovie+iPhone 6s combo can do that, I’m thinking the iPad Pro with a GPU that’s quite a bit more powerful than what’s in the iPhone 6s will shrink the time down even more, to about half?!

PS: This past Sunday I retired the iPhone 4s and will be using an iPhone 6s to record going forward.

Bloc.io’s UI/UX Design apprenticeship helped me learn the trade via several projects and through weekly video conferences with a mentor. I plan to share my positive experience in detail and today I’d like to talk about my BIC Cristal project. My mentor — Jason Early, who by the way is an excellent designer, developer, and mentor — challenged me to reimagine the BIC Cristal. For those of you who have not heard of the company BIC or its Cristal pen, the Cristal is the company’s most famous ball-point pen, and probably one of the most popular ball-point pens in the world. In all likelihood you have probably used one in your life.

Take a look at the current — as of this writing — landing page for the BIC Cristal. The BIC Cristal is branded as a cheap, replaceable, almost throw-away ball-point pen. This has been the way the Cristal has been marketed for as long as I can remember. The challenge was to develop a landing page for the BIC Cristal that transforms this image. What that image should be depended on what I would find as I researched the history of the Cristal ball-point pen.

During my research of the BIC company and the Cristal pen, I found many interesting facts, which I will be detailing as I go through the different design elements of the landing page.

First, I want to talk about the logo and how I went about redesigning it. The redesign of the logo, icon, and landing page went in parallel and fed back to one another; as I learned more about the company and the product the designs changed here and there.

What you see above is the current logo. The BIC font is inconsistent in its design. One line gets thinner towards the bottom, another line does the opposite. The overall look and feel is, well, there isn’t an overall. It’s messy. I thought playful, but with the serif-y ‘C’ not so much. I think it’s just a mess. Juxtapose the messy slanted text to the upright figure and the design gets even more confusing. He — could be a she, but I’ll bet he’s a he — has a v-neck sweater, long socks, and a necktie. He holds a pen — with his hands behind him — so he’s probably a student of some proper sort. Only students who attend expensive prep schools wear clothes like that. I’d bet hardly anyone uses a BIC pen at these schools. The logo and icon together and independently don’t seem to be working very well.

I wanted to simplify icon first. The ball-point head is the most prominent part of the design and it has relevance to the company’s product itself so I wanted to keep that.

What I did here was to get rid of what I thought was superfluous elements. I wanted to get to the most simple form that still pointed to a human figure, while maintaining some connection — the v-neck — to the original. When I did that the icon looked like the letter ‘i’ so I thought why not integrate it into the logo. Then I started adding radius corners and paired it with a bunch of different fonts.

The thinner the icon got it looked better with thinner fonts, and vice versa. Nothing quite worked. I wanted to see what the icon would look like if I went all the way and made it really thin.

I went through a lot of different font faces, but at the end decided to stick with Slim Jim. Slim Jim looked modern, but it had some of the same qualities of the original font face, namely irregularity. Some corners have radius corners while others are sharp. But unlike the original these irregularities in Slim Jim brought about a modern feel with a little bit of softness.

The icon looks very much like the letter ‘i’, but it also connects back to the original student: it also looks like a tie. I was happy with the results.

The Cristal is a remarkable pen. Each Cristal is manufactured to make a line that is 2000 meters (or about 80,000 inches) long. BIC has been fine-tuning the Cristal for 65 years.

That ball-point doesn’t seem special, but it is: tungsten and carbon is fused together at 2000 Celcius to form tungsten carbide, an alloy that is almost as hard as a diamond.

Every single Cristal — 100% of them — are inspected for roundness and resilience. Since 1950 BIC has manufactured 100 billion Cristals. Now that’s something.

I used an iPhone to photograph and Snapseed to edit. I chose black and white to bring about nostalgia but also modernity.

My guess is not many take a close look at this pen, so I wanted to show the tungsten carbide ball in detail in the second photo. The third photo was taken to complement the 100 billion milestone and the hexagon shape.

There will be lots of different pens you’ll want, but if you think about all of these qualities, the BIC Cristal really is the only pen you’ll ever need.

I believe the goal of re-imagining the BIC Cristal pen as something extraordinary was accomplished through the re-designed landing page. Teaching myself the history, manufacturing technology, and what makes the Cristal special helped form the design not only of the logo, icon, but the entire concept.

We’ve created a pause button for the internet for things like dinner time, or when it’s time to take a break from the screens and go play outside. It’s customizable for each kid so it can be tailored to what is going on in your household.

A pause button for the Internet. Just want I’ve been waiting for. You can also set bedtimes, block unwanted sites, and analyze data usage by each child. Awesome.

Good tips overall, but I don’t think DISPLAYBLOG readers are impatient. And I don’t think you get easily puzzled by long sentences either. But I do believe every word and every sentence should deserve to be there. Being succinct is a lot more readable than being long winded. The third point is good. The other seven tips are solid, too.

So say it with me — say it out loud: stop starting and start finishing. Beautiful, right? A kind of verbal cudgel to snap your focus back to where it belongs: on completion. Version one. The beta. Whatever.

I needed to hear this. In my own words: Iterate — one line or one word at a time — toward the finish line.

This is a post detailing the design work I did for Ultimate Mobile Mounts (UMM), a startup based in Silicon Valley. UMM imports, markets, and sells smartphone car mounts that are manufactured in South Korea.

Brand Name

Let’s start with the name: Ultimate Mobile Mounts. I wanted to convey a sense that our smartphone car mount was the best. And what better word conveys that than the word ultimate. Instead of mobile I briefly entertained smartphone instead, but you can actually mount smaller iPad mini-like tablets, too. Another consideration was to make the last word — mounts — singular. But I wanted to keep the option of selling more than a single smartphone car mount.

I do believe among the smartphone car mounts you can buy today our mount is one of — if not — the best. There are several reasons, and I’ll do this quick: a non-stick adhesive and suction cup work together make our mount stick, three pivot points make our mount extremely flexible, and our mount is beautiful.

Model Name

I decided that our smartphone car mount will only come in white. It took some convincing, but it was obvious we did not want to compete against millions of black mounts with another black one. At the time of our launch I think we bumped in one other non-black mount, but I’m not completely sure. White stood out and although white is not the most popular color for car exteriors or interiors, or for smartphones or smartphone cases, white was enough of a differentiator that stood out in an ocean of dull black ones.

Our first smartphone car mount was named Everest. It is a play on the words ultimate and mount, and on the color white. The ultimate white mount? The answer is obvious.

Logo Design

Once the brand name and product were decided I had a certain feel for where the direction of the logo design should go. I decided against an icon partly because a smartphone car mount comes in a lot of different shapes, but mostly because the brand name led to a funny acronym: UMM.

UMM… is probably not the most sophisticated acronym, but it reminded me of UGG. My first reaction to the UGG brand name was: “That’s a stupid name. Why remind us of ugly?” UMM can remind us of umm… that unprofessional pause word that we use all the time. But UGG for all accounts and purposes is a successful brand, despite its acronym. So UMM can too, is what I thought. I used the three letters and started designing a logo.

The image above was the first version I ended up with. I started hand-drawing the UMM part in Illustrator. I thickened the lip of the letter U to make it more ultimate, more like a champion. The two M’s I designed to remind us of mountain tops, a continued play on the word mount. The two red vertical bars weren’t originally there, but without them I had a difficult time differentiating the three characters. I made those bars red to differentiate them, but it looked a little too sinister. The text underneath is in the font face League Spartan, which can be found at The League of Moveable Type. I liked League Spartan because it was bold — as if it was announcing a winner — but not obnoxious.

Here is the final version of the UMM logo. I changed the sinister vertical bars separating the three characters in three ways. One, the red had to go. Two, I elongated them almost to the ends so I could more easily identify the three characters. Three, instead of an outline I decided to make the letters solid.

I changed the font, too. The reason for this has little to do with design and a lot to do with business. For some reason the printing company that worked with our manufacturer in South Korea had a difficult time with embedded fonts in my Illustrator files. So I decided to hand-draw the letterings to get away from fonts altogether. That solved the printing problem in one go.

Web

A web presence today is mandatory and with my fingers crossed searched for ultimatemobilemounts.com on Hover (consider using my referral link — I get a couple of bucks back if you make a domain purchase there, and Hover has been darn good for me for many years). Well, the domain was available! Then the question was where to host it. I thought of WordPress, but decided I’d try my hand with Squarespace. What convinced me were all the beautiful templates. The learning curve isn’t steep, but there are some new editing methods to get used to. For several days I didn’t know how to insert photos. It turned to be so simple; I don’t think I need to explain here. Check out www.ultimatemobilemounts.com; it is a work in progress. I wanted to get it up and out there. Looking back I can see I was rushed. (Note: I needed to take the website offline.)

I wanted to keep the website similar in feel with our Everest mount: white, grey, with a little splash of color. Your constructive criticism is most welcome.

I also started a blog centered around the idea of road trips. (Note: My UMM website had to be taken offline.) I was guessing a handy smartphone mount would make road trips a lot more fun. We took a road trip around the San Francisco Bay Area and took some photos and videos. You can see some videos on the UMM Instagram feed. (Note: I needed to take my UMM Instagram account offline.)

Photography

Most of the photos on the website were taken with one of these: a Samsung Galaxy Note 4, Apple iPhone 4s / 5c, and a Sony RX100.

I have loved photography — check out my personal Instagram feed — for quite some time, but a lot of what I learned was through trial and error. Right before I started designing for UMM I had the fortune of bumping into a free online course on portrait photography. I learned a little about lighting and about reflecting light in particular. The photo of Everest at the beginning of this article is the result.

I took it in our cubicle. The main light from the left is a LED work light bought from a local hardware store and I used the LED flash from my iPhone 4s to add a little brightness in the front. I was working with the idea of having Everest as though it was a model. Capitalizing on Everest’s flexibility I was able to find a few interesting poses. Not professional level, but I’m thinking the photos are passable for web use. Again, if you have any constructive feedback for me, feel free to contact me.

Video

I wanted to show how easy it was to mount a smartphone on Everest. I first thought I’d draw it and then animate it, but that didn’t work out too well. I’m not that great at drawing and I’m not at all good at animation. So video it was.

My car though faithful and reliable isn’t very pretty, so I asked my sister and brother-in-law if I could use their brand new SUV. Of course, them being generous folks said yes. And my sister offered to help with the video and be the hand model. I did not refuse.

I used my Sony RX100 point-and-shoot camera on a suction-only mount I purchased a long time ago on the driver’s side window to capture the video. I added the title page, the page at the end, and transitions using Adobe Premiere Pro. I used the Source Sans Pro font — you can find it at Font Squirrel, an indispensable site where you find free, beautiful fonts — to give it a high-tech look and feel. Check out the video on Vimeo. I then posted the video on Facebook in my UMM public group, which I created to let my friends know about UMM. (Update: I needed to take my video offline to prevent unauthorized use of my video.)

More

UMM Everest was the first physical product I had the pleasure of working on. From the brand name, product name, logo design, package design to the website, photographs, videos, etc. I had a lot of fun and learned a lot. I still have much to learn about design and I look forward. One area that I’d like to explore is in how to design effective marketing without having to empty your bank account. If you have awesome ideas you’d like to share, contact me.

[ Volvo ] The Concept 26 is Volvo’s vision of the future of cars where autonomous self-driving technology is combined with our need for control. I think it is an exceptionally well balanced vision. The three modes — drive, create, relax — gives control to the driver. Drive lets the driver take the wheel. Create gives the driver a little more room by sliding back the seat and tilting. In Relax mode the seat is fully reclined. Create and Relax put the car in autonomous mode, but the driver can at any time re-engage Drive and take control.

Full Disclosure: LG Display is a client of mine at the time of this writing. There has been some confusion in the market regarding the company’s M+ technology and at the request of LG Display I have written this article for clarification. This article has been edited only by me.

What is M+?

M+ is LG Display’s sub-pixel panel technology that uses four sub-pixels rather than three. Most displays use three sub-pixels: red, green, and blue. This RGB sub-pixel arrangement in a 3×1 layout is often referred to as RGB stripe. Three sub-pixels make a single pixel, physically and visually. M+ on the other hand uses four sub-pixels: red, green, blue, and white, or RGBW. And a pixel can have a different mix of RGBW.

For instance, the first pixel in a M+ panel starts off with RGB, and the next one to the right is WRG, and then BWR, GBW, etc. The diagram in this PDF (LG Display Addresses Environmental Issues with M+) should help with visualizing the structure.

Why M+?

The benefits of adding a white sub-pixel are brightness and cost. Right now as I am writing this article on WordPress roughly 90% of my screen — a 15.4″ 1920×1200 LCD — is white, which means light is passing through all three sub-pxiels; remember all three primary colors (red, green, and blue) are required to make white. Pushing photons through a RGB color filter is inefficient; about 60-70% of light gets blocked. The light transmittance rate further declines when more pixels are added to the same screen. The trend going from 1080p (1920×1080) to 4K/UHD (4096×2160/3840×2160) is a good example.

Light is generated by a backlight. Roughly speaking, a 10,000 cd/m2 LED backlight will result in a 500 cd/m2 screen. That translates to a 5% light transmittance rate. It doesn’t help that the backlight is the most expensive component of a LCD.

The transition from 1080p to 4K/UHD adds a lot of pixels. A 1080p set will sport a 1920×1080 pixel format for a total of 2,073,600 pixels. A 4K/UHD set has 8,847,360 pixels (4096×2160) or 8,294,400 pixels (3840×2160). That’s more than quadruple the number of pixels, and puts pressure on the backlight to generate enough light.

M+ is the result of the transition to 4K/UHD and the need to reduce the cost related to the backlight to bring to market affordable 4K TVs. The addition of a white sub-pixel improves the light transmittance rate to 8%. Assume the same brightness target of say 1000 cd/m2 on a 4K/UHD TV, M+ translates to lower backlight costs by reducing the number of LEDs and/or optical films compared to a panel that uses a RGB stripe configuration.

Skyworth, Konka, Hisense, Haier, Xiamoi, and Philips are using LG Display’s M+ LCD panels for their 4K/UHD TV lineup. I expect 4K/UHD TV prices to continue falling, and at some point — US$499 50-inch 4K/UHD? — prices will hit an inflection point, from which there will be mass adoption.

Is M+ 4K/UHD real 4K/UHD?

This is the question that requires some clarification. Let’s compare four pixels in a row. On a M+ panel the four pixels would be made of these four sub-pixel sets: RGB, WRG, BWR, GBW. On a RGB stripe it would be: RGB, RGB, RGB, RGB. Now let’s count the sub-pixels:

M+: R (3), G (3), B (3), W (3)

RGB Stripe: R (4), G (4), B (4)

RGB has a total of 12 sub-pixels. The composition of the sub-pixels are different, but the total number of sub-pixels in the M+ example is also 12. The white sub-pixel is also a sub-pixel though its purpose is slightly different.

When the screen is mostly white, like my screen at the moment, the white pixels are used to make it brighter without using more power. The white sub-pixel also increases the difference in brightness between pixels to enhance image sharpness.

I don’t blindly trust international organizations, but the ones mentioned above have some credibility. I highly recommend taking a look for yourself. The most important question should be: How does a 4K/UHD TV using a M+ panel look to you?

Be sure to insert your S Pen with the nib pointed inward. Inserting the S Pen the wrong way can cause it to become stuck and can damage the pen and your phone.

This is user experience design failure. The S Pen should have been designed so it cannot be inserted the wrong way. And if designing such a stylus was not feasible, the insert should have been designed where if you inserted the S Pen the wrong way it should not cause it to get stuck or damage the pen or damage the phone.