Joining the CSS Naked Day 2020, I am removing my CSS to reveal the bare-bones HTML of this site. Without the CSS makeups, the site looks plain, but still works well. It also makes me appreciate the power of CSS. I didn’t realize that my SVG logo has no width or height in HTML. As a result, the default logo takes up the entire browser width. I fixed it. Other than the logo, the blog is all text. I hope you enjoy it. This is as naked as I get online.

Visualgui is my personal blog started in 2003. It is a space for me not only to practice my writing but also to hone my web design skills. In addition to blogging vigorously almost everyday, I redesign it several times a year. The process is more iterative than comprehensive. The most drastic changes would be the typography. Whenever I discovered a new text face, I would love to set it here first. I focus mainly on readability.

This blog has been powered by WordPress from the get-go. The theme I had custom remained the same with just three files: index.php, style.css, and screenshot.png. That’s all. Even though WordPress has grown into a powerful content management system, I still use it as a blog system and nothing more. Keeping the theme simple allows me to quickly change the design with CSS. Most of the time, I can visualize the design in my head. I know what typefaces I want to use and how to set them on the page. I also can see how I layout my content. When I begin coding, I just modify my CSS file. The process is inspired by JAY-Z. He never wrote down his lyrics. He just went into the booth and recorded.

Because I make changes all the time, I have wanted to put together a page to showcase all the designs I have done over the years. Here are the screenshots dating back from 2004 for posterity.

After reading Professional Web Typography, a reader wrote:

Hi,

I contributed to your web book. Thank you for making the web a better place. I have been working on the web (semi-professionally) since around 2004. It’s amazing to me how much things have changed, yet how much they have remained the same. I’m intrigued with webfonts, but am frustrated that professional typefaces are largely cost prohibitive for someone like me that would seek to use them on a small personal website that would generate only dozens of pageviews in a very good month. I would support professional type designers if there were more affordable options.

In any case, thanks again for your web book and for your thoughts on Visualgui.com. I couldn’t stop until I went through all 19 pages in the design category.

Please keep sharing.

Regards,
MF

Here’s my response:

Dear MF,

Thank you for reading my web book. I feel your frustration on the cost for professional typefaces, but I also understand the amount of work goes into creating a professional typeface. For my personal use, I search for typefaces that I can afford.

For example, I am a member of the Font of the Month Club runs by David Jonathan Ross. For $6 a month, I have access to fun, experimental typefaces I can use for my personal projects. I also made a few investments in Future Fonts. I invested early; therefore, the cost was around $15 to $50. As the designers update their fonts, I get the latest releases for free.

If there’s a typeface I wanted but the price is high, I purchase only the fonts I needed. For example, I wanted to use Exchange, by Frere-Jones, for body text; therefore, I only bought two fonts (a regular and an italic) for $75. With just two styles, I know I cannot have bold and bold italic text, but I can turn them off easily with a few lines of CSS—that’s one of the beauties of the web.

If none of those above services work, you can always find a handful of decent typefaces on Google Fonts.

I wish you all the best with your typographic journey.

Thanks once again for contributing to my book.

Regards,

Donny Truong
donnytruong.com

Over the weekend, I decided to put together a print page on my portfolio website. I thought I would never touch print design, but here I am embracing it. Let’s reflect briefly on my journey to graphic design.

When I was a sophomore in college in the early 2000s, I landed an internship at the Trump Marina. The casino is no longer in business. I was supposed to be working and learning from a graphic designer in the marketing department, but he didn’t give me anything to do. I was bored out of my mind and was not learning much. I didn’t understand anything about printing resolutions and image qualities. I was so frustrated that I focused entirely on web and interactive design. For years, I hated print design.

In Vietnamese, there’s a saying, “You will get what you hate.” It came true when I started my career at George Mason University Antonin Scalia Law School almost ten years ago. In addition to my primary responsibility as a web services developer, I took on a few print design jobs including signages, banners, and covers. Then I applied for the MA program in graphic design at George Mason School of Art. To my surprised, I was accepted even though my portfolio didn’t include any print material.

Through the program, I learned from my graduate classmates on basic printing techniques. I also mastered Adobe Illustrator to complete most of my assignments. I am ashamed to admit that I still don’t know how to use Adobe InDesign. Then again, I don’t design the entire magazine or book; therefore, I can get by with just Illustrator. Now I take on print design at my job or freelance gigs from my kids’ Taekwondo class or Boy Scout.

What I enjoyed the most about graphic design are grid and typography. Those are my two primary tools to create print materials.

These days, I no longer develop websites using a content management system. WordPress has become way too complicated for me. MODX is solid, but it is not a simple solution for small websites. I made a few projects with Kirby. Unfortunately the upgrade process is not automatic like WordPress. When I upgraded a client project from version 2 to version 3, I had to go through quite a bit of steps.

Another major problem with using the CMS is that once I hand over the sites, the clients would mess up the way I designed the sites. They added inline styles and changed fonts. The visual editors screwed up the markups. I still see this problem with the new Gutenberg editor in WordPress.

After giving up on using CMSs, I came to realize that I can offer my clients full support of their sites. For a few clients, I have designed, developed, and maintained the sites for them. I use nothing, but HTML, CSS, and a bit of PHP to make the site easy to maintain and update. If they need to make updates once in a while, I can do so for hourly fees. They just drop me an email. If they update their website everyday, I am not the right designer for their project.

Because I do all the updates, I keep the markup clean. In addition, I have a copy of their website backup so they don’t have to worry about having their site hacked. Even if they were hacked, I can bright their site backup quickly. Our relationship becomes more like a partnership.

So if you have a need for a small website, I can help. Most projects will be less than $5,000. Let me be your designer, developer, and CMS. I will work with you to make your site fast, accessible, readable, and truly customized for your own brand. There will be no picking out templates like you do with other services.

Made the body text on this blog smaller and the leading a bit tighter. As I am writing longer posts these days, the body text needs to be smaller to improve readability.

On my professional portfolio, I swapped the body text from Roslindale Text, by David Jonathan Ross, to Frequenz, by Sebastian Losch. I kept Roslindale Display. I really love the contrast between a classic display face and a modern sans-serif body text.

I quietly switched out the wordmark for simplexpression. The new workmark is set in Roslindale. If you look closely, the first letter “s” and “ex” are set in Roslindale Italic. I had to make them a bit slanted because the “s” in Roslindale looks the same in normal and italic style. I wish the italic style is a bit different so I don’t have to make it slanted. For more of my logo design, check out my branding page.

I changed the typography for I Love Ngọc Lan as well. The new text face is Livvic, by Jacques Le Bailly and headers are set in Calistoga, by Yvonne Schuttler and Eben Sorkin. Just a bit of touching up the keep the sites stay fresh.

Tôi muốn đọc thơ Hồ Xuân Hương nhưng khi tìm đến trang Thi Viện thì chả muốn đọc. Cách thiết kế lộn xộn quá và trình bài không ưng ý nên tôi tự tạo ra một trang riêng gọn gàng hơn và dễ đọc hơn. Đặt biệt là chú trọng vào phông chữ cho nên tôi làm ra một trang để vào trong phần samples của nghệ thuật chữ Việt luôn. Chừng nào có dư một phút tôi sẽ mở lên đọc mấy bài thơ của Hồ Xuân Hương và học tiếng Việt luôn. Mời các bạn cùng đọc thơ của Hồ Xuân Hương.

Nếu bạn nào có ý khiến hay để tạo những trang web nho nhỏ hữu ích và để giới thiệu đến tiếng Việt của chúng ta thì liên lạc với tôi nhé. Không hứa trước nhưng có thời gian và cơ hội tôi sẽ làm.

For a while I have wanted to include some logos I have designed on my portfolio website. I finally got around to put the branding page together. I also brought back the good old slideshows. I reset the type in Roslindale, by David Jonathan Ross, to experiment with its variable fonts, which David has released over the years for his Font of the Month Club. I am not sure when David will complete this typeface, but I am sure it will be a fantastic variable font system. Take a look at the homepage of Donnytruong.com.

When Jeffrey Zeldman published “Another Blue Beanie Day” on his website, I noticed that he has switched his design to WordPress Twenty Twenty and my heart sank a little.

The man who brought us web standards has given up on designing his own site. I still remember being in awe to see his website sported a new design every few months. He inspired me to do the same with my own site, which I still do til this day. I have kept this blog so simple that it doesn’t take me much to whip up a new design. The changes here aren’t so drastic, but I do make the changes several times a year.

I hope Twenty Twenty is just temporary until he cooks up a new design. No pressure!

Laura Kalbag makes a convincing case for personal websites. Kalbag writes about freedom:

Personal sites give you the freedom to practice the design and development you care about, without the constraints of your boss’s bad business model or your manager’s questionable priorities. We can create accessible and inclusive sites that don’t exploit our visitors. We can experiment and play to work out what really matters to us. If we don’t like our personal site, we can start again from scratch, iterate, change, keep working to make it better.

Kalbag writes about design choice:

Your own personal website means you choose the design. Rather than sharing on a blogging platform like Medium, we can make our design reflect our content and our principles. We don’t need to have ads, paywalls or article limits imposed on us.

Kalbag writes about no tracking:

It does rather defeat the point of having a personal website, if you then hook it up to all the tracking mechanisms of Big Tech. Google Analytics? No thanks. Twitter follow button? I’d rather not. Facebook Like button? You must be joking. One of the benefits of having your own personal site is that you can make your personal site a tracking-free haven for your site’s visitors. All the personal websites I’ve shared here are tracking-free. Trust me, it’s not easy to find websites that value their visitors like this!

This is one of my favorite essays on 24 Ways this year.