Visualgui 2017

As I was looking for inspiration for the 2017 version of this blog, I came across Keith Houston’s The Book. Although I only started to read the first chapter, I love the design of the book so much that I decided to redesign this blog to emulate the reading experience on paper.

The main typeface is Skolar, designed by David Březina and Vaibhav Singh. Because Skolar has many OpenType features and support for Vietnamese characters, it is a perfect balance between flexibility and performance. For the logo, I wanted to have a bit of flare and Memoriam Pro Headline, by Canada Type, does the job.

The layout is a simple single column to focus on the text. I am pleased with the new design even though it is not a radical change.

Jay Z On Designs

When the 10K Apart contest first announced, I was excited, but I was not planning on participate. I didn’t have time and I had no idea what I would do.

When I was on vacation, however, I redesigned this blog. I ended up creating The 10K WordPress Theme. After I submitted that project, I felt it was not inspiring at all. I asked to withdraw, but it was too late.

Around the same time, another concept came to me and I felt motivated. Jay Z On Designs is the result of it. Because 10K Apart allows participants to enter up to three entries, I just submitted another one. You can read more about the project on my portfolio or just go straight to it. Wish me luck.

The 10K WordPress Theme

To participate in the 10K Apart contest, I redesigned and recoded my personal blog, which runs on WordPress. The first challenge is that I must rebuild my WordPress theme to deliver a compelling experience in 10 kilobytes. In addition, I write in both English and Vietnamese; therefore, my theme must support Vietnamese characters.

Like the web, WordPress theming has become bloated with front-end frameworks and JavaScript dependencies. When I first learned WordPress back in version one, its Classic theme was simple and easy to grasp because it only contained ten files. In contrast, a modern theme like Twenty Sixteen has fifty-one files. WordPress theming has become too complex over the years. To get back to the basics, I scrapped my previous themes and started a brand new one from scratch with just two files: index.php and style.css. I wanted to control every markup that goes into the theme; therefore, I applied PHP functions to only dynamic contents and used as much static components as I can to improve the processing time. The result was a lightweight template that accommodated my design.

The other half of the battle was to support the Vietnamese language. If I used a custom typeface that has Vietnamese subsets, the filesize for the fonts alone will be over 100 kilobytes. I had no choice but to go with the system fonts. For body text, I count on Times New Roman as my first choice. If Times New Roman is not available, I fall back to Times, and system serif if all failed. Headlines are set in Tahoma and fall back to Verdana and system sans-serif. The wordmark is set in Impact and fall back to Haettenschweiler, Arial Narrow Bold, and system sans-serif.

In addition to typography, responsive design and accessible played an important role; therefore, I took advantage of CSS Flexible Box for layout and ARIA Landmarks for screen readers. Of course, the goal for the 10K Apart contest is performance. For my submission, I put a static demo, which is under 10 kilobytes, on Github. To experience the live version, visit Visualgui.

Changing the Typeface

I drew the inspiration for this little redesign from rereading Marty Neumeier’s excellent The Brand Gap while on vacation. The entire book is set in large Helvetica with generous leading. It is surprisingly easy to read. At first, I was going for Acumin Pro, but instead I went with Hypatia Sans, designed by Thomas Phinney and Paul D. Hunt. I was not too fond of this eccentric typeface, geometric sans with humanist undertones, at first, but it grows on me. It has quite a bit of personality, which is not a typical choice for running text. This is a personal blog so why not?

In addition to the typeface, I brought back the sidebar to bring back the good old blog design. I have a hate and love relationship with the sidebar, but I am sticking with it for now. I also went back to pure white background with black text to simplify the design. I hope you enjoy this little redesign.

I am still enjoying myself at the the beautiful Siesta Key island. I’ll update this blog next week. Time to hit the beach.

Introducing Typographically Trịnh

I am excited to introduce Typographically Trịnh. This is an independent project that aims to highlight Vietnamese typography with my favorite quotes from Trịnh Công Sơn, whose philosophical lyrics I always find intriguing and inspiring.

My goal is simple. Each day I will pick out a quote to design with my own understanding and interpretation of his words. Take a look at the first four pieces I have created. Although Trịnh Công Sơn had written over 600 songs and I only found 244 songs, I will only select 100 quotes that speak to me the most. Why 100? I wanted to do #The100DayProject to help myself stayed creative. I also just want to build websites.

Although I have all the basic structure (HTML and CSS) set up, I won’t see myself creating the pages on a daily basis. I will take my time to fulfill the 100 designs I set out to do. The process will take longer, but I am OK with that. Even though this project has been in the back of my mind for a while, it is started to take shape only after I saw the redesign of Google Fonts. The new directory has a number of decent fonts that support Vietnamese characters. I will also use Typekit for this project.

I am so glad to see that my book on Vietnamese typography has been useful to type designers. I am hoping to see more typefaces that have support for the Vietnamese language. I hope that a project like Typographically Trịnh will motivate type designers to consider extending their fonts to support Vietnamese.

ON Designs Gets New Changes

I have been touching up ON Designs a bit. The logo is now contained in a square box. The text face is now set in Arno Pro, another beautiful serif by Robert Slimbach. The large display heading is now set in Eloquent JF Pro by Jason Walcott.

I also wrote a new intro:

I’m Donny, a designer who omits needless designs.

I’ve been practicing simple designs since 1999. I honed my craft by reading William Strunk Jr. and E.B. White and listening to Miles Davis. While Strunk and White taught me the value of taking out unnecessary elements, Davis taught me the important of white space—what you leave out is as essential as what you put in. Learning from the masters of communication, I strive to create clear, honest, and meaningful connection between your product and your audience. Take a look at some of the projects I have worked on.

Three Changes in One Week

This site has gone through some minor changes again. I brought back the sidebar again on larger screens. I was not quite happy with the previous change. Without the sidebar, there is simply too much whitespace. The new change is inspired by the The Washington Post I picked up this morning when I dropped my kid off to daycare. I think I am satisfied with this version, but you never know. I may make more changes later on. The typography feels just right. The colors are muted enough. The sections of the layout are separated by gray lines. I hope you enjoy it before I change it again.

No Sidebar Again

The new redesign lasted three days. Last night, I changed the design again. The sidebar feels cluttered; therefore, I went back to one column. In addition, I can’t seem to use sans serif for body text; therefore, I return to one of my reading faces Adobe Text Pro by Robert Slimbach. The color scheme stays the same.

I’ll continue to tweak and fine-tune it until I find something inspiring. That’s the beauty of having and designing your own site. Yesterday I read a fascinating article called, “The Secret Lives of Tumblr Teens” by Elspeth Reeve. The sad thing is that these kids worked so hard to get a million followers and completely lost their site one day without a warning. Tumblr just shut down their blog. This is the biggest reason I don’t trust a third-party site with my content.

Bringing Back the Sidebar

At the time when everyone wants to kill the sidebar, I am bringing it back with the 2016 redesign. After separating my professional work from my personal blog and launching my online portfolio, I am now focusing this site as my writing platform. I am no longer interested in posting on other places such as Medium, LinkedIn, or Facebook.

The first order of business for the redesign is to get rid of the navigation since I no longer needed it. The main focus is still on the readability of the articles, but I also played up the sidebar. Readers can find everything they need to know about me and my work right on the sidebar.

As far as the new design goes, I am once again returning to Swiss design. For the typeface, I am setting neo-grotesque Acumin Pro, designed by Robert Slimbach, on the entire site. I also wanted to move away from white background and play with pink.

For the backend, I am still rocking WordPress, but reducing my theme to just two files (index.php and CSS). For the layout, I am using flexbox for the columns instead of floats. I am loving flexbox.

That’s it. I hope you like the new change.

Designing a Literary Reading Experience on the Web

I am pleased to announce the launching of the web-based version of Thơ Mưa, a book with a collection of 39 Vietnamese poems written by doctor and poet Cao Nguyên. If you can read Vietnamese, check out the book’s web site. If you want to find out more about the web project, read the case study over at my portfolio site.