Visualgui 2020 Iteration 4: Ad Free

The forth iteration of this blog returns to an ad-free design. The ad experiment was fun, but didn’t quite work out as I hope it would. I didn’t think it would work out because I always wanted to change up the design of this blog. With ads, I might be stuck with one design for a while. As a result, I wanted to get back to just making this site a personal blog like it always has been.

A few months ago, I also reduced the footer. I moved all the footer stuff to the info page. The bottom of the blog is now much lighter. I like that. Scrolling on a mobile device is less exhausting.

Of course, the redesign comes with new set of typefaces. Body copy is set in Harriet. UI elements are set in Alright. Both typefaces designed by Jackson Showalter-Cavanaugh for Okay Type.

Simplexpression Rebranded

When David Jonathan Ross sent out Pomfret on July 1st to his Font of the Month Club members, I immediately thought of using it for Simplexpression.

Pomfret is such a beautiful, elegant titling face based on Bertram Goodhue’s Arts & Crafts lettering for The Knight Errant magazine. Unlike the original drawing, David increased the contrast between thick and thin to give Pomfret the extra edge.

In addition, David added over 175 ligatures. Simplexpression has always been about the hidden letter E. As a result, Pomfret is perfect for the Simplexpression brand. With the new wordmark, MP, EX, and EX are joined together. Although SS is a ligature, I wanted to make it extra special. I flipped the second S to form the heart shape. It also gives a sense of weaving strings together like when my wife created her pieces with her hands. I really love how the new wordmark turned out. Take a look.

New Site for Kristin Bair

I have the pleasure of working with Kristin Bair to promote all three of her novels: Thirsty (September, 2009), The Art of Floating (April, 2014), and now Agatha Arch Is Afraid of Everything (November, 2020). With the release of her new book, she wanted a new website. Her goal is to have everything in one place. I revamped her website to draw attention to her new novel and to simplify her online presence.

Read my write-up or check out her new site.

Designing for Class of 2020

For the law school’s class of 2020, we wanted to do something special on graduation. The Senior Associate Dean wanted to put together a banner on our homepage looping all the graduate names. When I received the request, I was not sure how to include over 230 graduates on a small banner. After doing some research, I came up with the scrolling solution, which is similar to the credit at the end of a film. I came across this simple CSS scrolling text technique by Syed Murtaza and adapted for our own use. The scrolling banner is only featured for today so take a look before the day is over.

In a typical graduation year, we would have a print booklet about 40 pages. Since the event is online this year, we wanted to create a short program page recognizing all the graduates. I put together the program page using CSS multi-columns. I really love this CSS feature. It makes typesetting for something like this painless.

We also created a page for the faculty and staff to leave personal notes for the graduates.

Visualgui 2020 Iteration 3.1: Editorial Layout

I was flipping through the recent issue of Time magazine and came across a layout that caught my eyes. I love the photo treatment. The layout is simple yet striking. As a result, I wanted to adapt it for this blog.

Using CSS Grid, I played round with combining text and photo. I can divide the layout in half or make the image takes up two third. I can use grid template areas to switch the placement of the image. I really like the flexility CSS Grid provide. The best part is that the photo only shows up on large screens via media query. Small screens only get text layout. The photo does not download on mobile devices. I do not want to waste reader’s data.

I haven’t used photography on my blog for a while and I have been wanted to bring it back. I am pleased with this direction. It took me about half an hour to accomplish this. I really love CSS Grid.

Visualgui 2020 Iteration 3: The “a”

For iteration 3 of this blog, I changed the big display text to Gimlet Sans, May’s Font of the Month that David had just sent out earlier today. Because of the lovely “a” in Gimlet Sans, I switched the text face back to Fragen, by Lucas Descroix. I love the way the “a” in each typeface has similar features, and yet they are different.

I also brought back the dark mode after reading Kilian Valkhof’s “Your dark mode toggle is broken.” I didn’t implement the toggle button. The only way you would see the dark mode is when you switch your operating system to dark mode. I also added a bit three red stars as end marks for a bit of decoration. Why not?

One of the best things of having a personal website is that I get to experiment and change the design whenever I feel like it. It gives a bit of a joy during this difficult time.

Mapping Corruption

Since becoming president, Trump has brought his brand of corruption to every federal government agency and it is hard for us to keep track of it all. In the cover story of the March/April 2020 issue of The American Prospect, Jim Lardner unlocks extensive dossiers of the activities happening inside 15 federal departments.

Last week, the magazine contracted me to create an online version of the story. After discussing with its creative director who was my advisor for my final thesis on Vietnamese Typography, I developed an interactive page based on a map illustrated by Peter and Maria Hoey. My initial impression was that I might have to create an image map, which I used to despise and hadn’t have to create one in years. Thankfully, I was able to export the illustration into an SVG, which allowed me access individual shapes of the building to create links and hover state. When users hover each department, the building moves a bit and turns dark. Another requirement was to have the dollar signs flying across the map to show corruptions.

The project turned out well. The illustration is beautiful and the dossiers are informative. I invite you to check out “Mapping Corruption: The Interactive Exhibit.”

Visualgui 2020 Iteration 2: Re-typesetting

For the second iteration of Visual 2020 theme, I reset the typefaces. Main text is anchored in Exchange, by Tobias Frere-Jones. I played a small role in providing Frere-Jones my feedback on Vietnamese diacritics before this typeface released. Headings are set in Bild, by David Jonathan Ross. Bild’s variable font comes in handy for setting various level of headings. For the title of each article, I am making it big. Code excerpt and category are set in Input Mono, also by DJR. I also changed the background color. I went down the rabbit hole a bit on COLOURlovers and I needed to stop. This iteration is not a big departure, but a change to keep the site fresh. These days I don’t do a whole redesign, but small changes here and there. I hope you enjoy this little update until iteration 3. I am not sure when that will be, but pretty sure in three to six months depending on what typefaces I wanted to try out next.

Website for Bố

In 2012, my wife asked me to create a tribute website for her father after he passed away. I stood up WordPress and created a child theme based on Twenty Twelve, which was WordPress’s default theme at the time. WordPress was quick for me to set up and easy for her to add content. Except for his biography, she put together photos, videos, and letters from family members and friends.

Since then she hadn’t updated the site. She doesn’t need to. It is a special little site to keep all the wonderful memories of him. I could have left the site as it was, but I felt WordPress was not necessary. Even though I had automatic upgrade turned on, maintaining WordPress was not ideal. In addition, the Twenty Twelve theme seemed outdated.

I had wanted to redesign the site from scratch and to remove WordPress for a while. I finally found the motivation and the time last week to do it. I recreated the pages using HTML, CSS, and a bit of PHP. The new design is fresh and no longer driven by templates. It felt great getting rid of WordPress altogether.

Redesigning the site feels as if I have paid proper tribute to my father-in-law. I wish I could share the website, but I respect my wife and her family’s privacy.

Rest In Peace, Bố.

Updating Đẹp Designs

A few months ago, I met up with one of the founder of Đẹp Designs over coffee. I casually pointed out to him that the images were heavy (about 2.5 mb a photo) and the dimensions were off. He told me that after I handed over the key and trained one of his employees to update the website, the employee had moved on.

When I relaunched Đẹp Designs two years ago, I gave specific instructions on the dimensions and optimizations in Photoshop. All that they needed to do was creating the images and upload them to the server. Kirby CMS will handle the rest. Unfortunately the images were huge and the sizes varied.

I made the suggestion that I can handle the update for them since they don’t seem to add new content too often. Because I would be doing the updating, Kirby is no longer needed. They would not have to worry about upgrading Kirby CMS. In my proposal, I offered to move the site off Kirby and rebuild it using PHP, audit the entire website, perform house cleaning to fix bugs, bring the codes (HTML, CSS, JavaScript) up to date, add an SSL Certificate, and updated from PHP 5.4 to PHP 7.3.

After they agreed, I spent some of my Thanksgiving break reworking the site. Take a look.

Info