visualgui

Visualgui 2018: Iteration 3

Iteration 3 of Visualgui 2018 is here to celebrate Vietnamese New Year. I started iteration 2, but decided to skip it. For this update, I made the logo bigger—much bigger. Fit, designed by David Jonathan Ross, works much better at a large size. Since this is a blog and a personal playground, I am not too worried about it being over the top. To beef up the design, I turned the logo into a graphical element, particularly on the homepage. I want to bring some soul into my blog.

I changed the headings from Tenez, designed by Rodrigo Saiani, to Rhododendron, designed by David Jonathan Ross. Although I still love Tenez, I could not resist Rhododendron’s bold and fun characters—the double-story g in particular. Of course, Rhododendron comes with Vietnamese diacritics. You can get Rhododendron by joining the Font of the Month. It has been so much fun receiving these beautiful display typefaces on the first day of each month. I can’t believe it will be a year in April. I hope David will continue this fun project.

The text face is still Ten Oldstyle, designed by Robert Slimbach. In iteration 2, I switched the body text to Pelago, also designed by Slimbach, but I just can’t use a sans serif typeface for reading text. I am still old school like that. Pelago, however, is still being used for small texts. It works really well as an UI typeface.

CSS Grid is still lots of fun to play with. Making web layout is such a joyful these days. I don’t have to wrestle with floats and all that jazz. That’s it for now, but I am sure I will make changes in the couple of months. Every time I do this, I remember Zeldman in the early late 90s and early 2000s. These days, designers don’t do redesign their own sites as much any more because of the increasing complexity of web design. It doesn’t have to be.

New Work: America

Just launched a brand new website for America to pitch a film script for F.H. Buckley who is the Foundation Professor at George Mason University Scalia Law School.

Since the goal is to provide information including synopsis, historical research, and story setting, about the film, the site needs to be clean, simple, accessible, and fast. Typography plays a huge role in the design; therefore, I combined Oswald, by Vernon Adams, with Spectral, by Production Type.

With a modest budget, Buckley could have thrown the site together and put it on Squarespace, but he chose my service instead. The result is that his doesn’t look like one of Squarespace’s thousands of templated designs. These days, I can spot a Squarespace website without even looking at the code.

New Logo

You probably already noticed the little square at the top left corner on this site. Yes, it is indeed a new logo for Visualgui. Why a logo now and what does it mean?

Since the launched of this site in 2004, I have always struggled with designing a logo for it. I had designed countless versions and none had met my satisfaction. It got to the point where I just pick a typeface and let it go. In the past few weeks during winter break, I started to play around with it again. I wanted to define what Visualgui is.

When I first decided on my domain name, I loved the site called SK Visual. The site surprisingly still exists; however, its earlier version was much nicer. I just loved the word visual. Then I saw some domain names that were on sell, including one called chunkygui.com. I thought it was kind of funny so I put the two together and ended up with Visualgui. Although Visualgui intended as a visual/design guy, the GUI part has a double entendre of Graphical User Interface. I just ran with it without a clear definition. At first, the site was meant to be my design portfolio. It changed completely when I started to blog. Only two years ago, I decided to separate my personal blog from my professional portfolio. Only this year I have my own name for my domain.

For Visualgui, I wanted to keep it as my blog for as long as I can. Does it really need a logo? Probably not. Who cares? No one, but myself. So it is more or less for me. Because of the name, I wanted to be as legible as possible because Visualgui is really vague. Using a sans serif typeface would solve that issue, but then it is not that unique. So I wanted to experiment with a bit with using squares in a grid. In the previous version, I played around with nine squares (similar to a Rubik’s Cube) and added Futura in each square to spell out Visualgui. It looked kind of cool, but without the letters, they were just nine squares. Then I remember Fit by David Jonathan Ross, which I had helped him a bit on Vietnamese diacritics. With Fit, I could fit each letter into each square. At a large size, each letter looks great. The small size, however, is not so legible. The letters started to look like shapes, but they are not the same. I like the ambiguousness of it just like the name of the site.

There are many opportunities I can do with this logo. I wish I could do the whole branding exercise for it just like what I have done in grad school, but I just don’t have the time at the moment. I also want to spend some more time with it too see if I am going to change it again in the near future. For now, it works for me.

New Year New Domain

All these years for some odd reasons I have not thought of getting my own domain for my name until this past New Year’s Day. I can’t even recall how it came to me, but I was surprised to find out that Donnytruong.com was available. I guess no one wants it, except me. Without much thinking, I snatched it immediately.

In the past two days off from work and one sleepless night, I migrated my portfolio from ON Designs to name. ON Designs is now redirecting to my new domain until it expires in June. ON Designs was one of those ideas that came too mind as the moment, but then it became too gimmicky. Omit Needless Designs plays off omit needless words. It is not that clever after all.

In the migration process, I made some design changes as well. I converted one-column layout to a grid-based design. I reduced the number of projects down to just six pieces that show varieties and my design sensibility. For typography, I set Roslindale Text as text face and Bild as headings. Both of these typefaces designed by David Jonathan Ross. I am trying to put my Font of the Month Club membership to good use.

There are more tweaks to be done, but I just want to put it out there.

Visualgui 2018

Continuing with the tradition, I try to redesign this site at least once a year. Visualgui 2018 is an incremental change rather than a complete overhaul. 2018 is built upon 2017. The focus is still readability and typography.

In this new design, my goal is to go fullscreen even on large desktop. Display texts and headings will span across the screen at any size. With my subscription for Font of the Month Club, I intend to use large typography for the hero banner on the homepage. I had stopped using images on this site for a long time and I have not missed them. Typography will continue to be the dominate feature on this site.

For reading, I am staying with Alda, designed by Berton Hasebe. While there are a handful of text faces that support Vietnamese characters, Alda remains the strongest contender. Its diacritics are sturdy and legible. For headings, I am going with the beautiful Tenez, designed by Rodrigo Saiani, even though its diacritical marks are not quite there for me yet. Rodrigo, if you want to improve Vietnamese accents, I am more than happy to help. Small text is set in Pelago, designed by Robert Slimbach. Its open counter works well at small size. Unlike previous versions, I try to use at least three or four typefaces at a time.

For colors, I am keeping the red, but changing the background to a subtle color. I want to move away from pure white background but still comfortable to read. I am also taking advantage of CSS Grid for layout. I hope you enjoy the new look and feel.

Some Updates

Made the text bigger for ON Designs. I also changed the typeface to Pelago a few weeks ago. I like the openness of this latest sans-serif typeface designed by Robert Slimbach.

For Thơ Mưa, I switched the typeface from Cormorant Garamond to EB Garamond, which has been expanded recently by Georg Duffner and Google Fonts. EB is much more legible than Cormorant, the diacritics in particular.

Put together a site to promote Learn. Challenge. Lead. I modified WordPress’s Twenty Seventeen a bit to fit Scalia Law branding. Twenty Seventeen is a decent theme for this sort of promotional site.

As you might have already noticed, I had changed the headings for this site to Halyard Display, designed by Joshua Darden. Just wanted something bold and different. This site is now using four typefaces.

Simplexpression Updates

Simplexpression is now typeset in Mrs. Eaves designed by Emigre’s Zuzana Licko. Mrs. Eaves’s elegant details are a perfect fit for Mrs. Nguyễn’s designs. The homepage is updated with CSS Grid to fill up the entire screen. I love CSS Grid and I also love this little project. I hope my wife will make more pieces in the near future. Right now her main job and the boys (including yours truly) are keeping her too busy.

Realigned With CSS Grid

This blog is now using CSS Grid. Although I have been wanted to play around with grid on the web for a while, I have been holding out for browser support. Now it is the time to make the switch. I am still very new at CSS Grid, but already impressed with this simple yet powerful feature. I am looking forward to learn more.

Grid has been an essential tool for my graphic design for a while. Needless to say, I am one of those designers that live and die by the grid. Therefore, the support of grid on the web is very exciting to me. I am still trying to wrap my head around all the terminologies because the terms for CSS Grid aren’t the same as ones I have been accustomed to. For instance, gap is used instead of gutter. Other than than, I am so glad that browser makers are onboard with supporting grid.

Mad props to all the designers and developers who had made grid on the web happened. If you want to learn CSS Grid, check out this resource.

I also reworked my résumé using CSS Grid.

Upgrade Law School Website to MODX Revolution

On the front-end, nothing has changed to the Law School website, but the backend is completely upgraded. We migrated the entire site to a brand new dedicated server, upgraded to the latest version of MODX Revolution, and switched to HTTPS. Anthony Harvey is the mad genius who has made all of these happened. He is such an amazing developer. If it was not for him, we would still be stuck in the good ole MODX Evolution. He responded to tons of my questions with patience. I am so grateful for his work.