Simplified

Here’s the new Visualgui for 2013. The design is not a huge departure, but quite a bit of refinement. The layout, in particular, is much more simplified. My goal is to create a consistent experience across all devices rather than relying on media queries to shift elements around. One of the recent criticisms of responsive web design is that layout changes drastically when viewing on different devices, which caused not-so-savvy users confuse. My approach is letting the mobile experience drives the design and making as less changes as possible when browsing in larger screens.

For the first time, I am including GUI elements in my navigation. This has been one of my pain points. While the name suggests GUI, I have never included any GUI elements. I have been doing quite the opposite of visual and graphical. Simplicity has always been my thing.

One of the big changes in this version is the restructuring. The naming and labeling needed to be changed to reflect my current direction. The site section is now renamed to web. This is the most important section of the site because designing web site is my area of service. The motion section is now renamed to special. I gave this one quite a bit of thought. Since I am no longer doing Flash slideshow, this section gets quite stale, but I don’t want to get rid of it entirely. Most of the Flash pieces I had done are personal and they are very special to me. I want to be able to make this section active and as the same time keeping an archive. As a result, I named it special so that I can continue to add more special projects in the future, but they don’t have to be motion slideshow. For instance, I’ll add my Jazzapp, which is a school project, once it is ready. The info section is now renamed to about. I have debated about this for a while and came to conclusion that about is more personal than info.

I also made a handful of subtle changes. I am now using the Monotype’s Noto families, which support full Vietnamese characters, for the texts. The pairing of Noto’s sans and serif created a nice harmony. I am glad to see Google is adding Vietnamese typefaces to its collection. It’s still limited, but better than nothing.

I chucked out all the rounded corners as well as infinite scroll. Although I don’t have an issue with infinite scroll, it’s not one of the most loved features of usability. In addition, getting ride of infinite scroll takes off quite a bit of JavaScript codes. Even though JavaScript is getting quite popular, I still want my site to depend less on js as possible. That’s about it.

Designer Profile: Jason Santa Maria

Jason Santa Maria is a graphic designer living in Brooklyn, New York. He recently co-founded Editorially, a collaborative writing application that “fully respects the actual writing process.” He is the co-founder of A Book Apart that “publishes highly detailed and meticulously edited examinations of single topics.” He’s also responsible for all of its beautiful book design. He’s the founder of Typedia, “a shared encyclopedia of typefaces online,” and a former creative director for Typekit, “the easiest way to use real fonts on the web.”

Jason is one of those few designers who could walk the line between print and web. Even though his design sensibilities are drawn from print design and a deep love for typography, he applies his vast knowledge of type equally well on both printed materials and web interfaces and his style strikes a balance between usability and readability.

In the previous version of his blog, he experimented with online art direction. He wrote:

Professionally, I’ve recently become a bit disillusioned with my design work because it feels static. I design a site, and regardless of the content, it’s usually dropped into a template, reducing the design to more a bit player rather than a worthy partner to that content. In other media, the design adapts to support different kinds of content and themes in order to play a supportive role. So when I decided I wanted a change, instead of designing one look for a site, I designed a system.

Jason proved that with CSS and HTML skills, web designers could break out of the static template and create a unique reading experience. In addition to his work, he also shares his knowledge on web typography. I can’t wait to cop a copy of his upcoming book for A Book Apart. In the meantime, his speaks at An Event Apart and Build Conference are must watch.

Learn more about Jason and his work at Jasonsantamaria.com and a great interview at The Great Discontent.

This is a preparation for my graduate seminar presentation on a designer I admired.

Mỹ Tâm – Tâm

Trong tôi Mỹ Tâm luôn là công chúa nhạc pop. Tuy nhiên đến nay tôi vẫn chưa rõ là công chúa này từ Việt, Tây, Tầu hay Hàn Quốc. Khởi đầu là một “Tóc Nâu Môi Trầm” với “Cây Đàn Sinh Viên” rất ấn tượng nhưng làm tôi say mê nhất là khi Tâm cất lên những lời ca lạnh lùng mà đầy quyến rũ: “Tình yêu đến em không mong đợi gì / Tình yêu đi em không hề hối tiếc.”

Đó chỉ là những cảm xúc cô tâm sự giùm tác giả. Sau này Tâm tự viết nhạc riêng cho mình. Một trong những bài của Tâm tôi không thể nào quên được là “Nụ Hôn Bất Ngờ” và nhất là những lời Anh Tâm chêm vào, “Oh first kiss! You make me happy! You make me crazy!.” Tuy happy và crazy vần với nhau, hai chữ hoàn toàn không ăn khớp với nhau. Phải chi lúc đó Tâm cho tôi xem trước khi cô phổ biến bài này thì tôi sẽ đề nghị Tâm sửa lại một chút như thế này: “Oh first kiss! You make me horny! You make me crazy!” Từ horny sẽ dẫn đến crazy. Sau này thì Tâm lấn sang Hàn Quốc luôn nên đến nay tôi không rõ Tâm là công chúa V-Pop, K-Pop hay tùm-lum pop.

Album mới nhất mang tựa đề ngắn gọn là Tâm, vừa là tên của Tâm cũng vừa là những tâm sự cô gửi gắm lại trong mười ca khúc do chính cô sáng tác. Nghe ba bài đầu tôi rất vui là vì thấy Tâm đang đổi hướng sang pop-jazz đúng với gu của mình. Bài đầu tiên, “Gởi Tình Yêu Của Em,” được hòa âm theo bossa-nova rất hấp dẩn. Tuy đề tài tình yêu đôi lứa cũ như trái đất, tôi chẳng e ngại miễn sao có trăng với jazz là ok rồi.

Bài thứ nhì, “Giữa Hai Chúng Ta,” cũng khá êm ái với đàn dương cầm và cây cọ quẹt phơn phớt. Bài thứ ba, “Còn Lại” là phê nhất với tiếng bass thùng cùng với những nốt cao và jazzy của dương cầm. Đến đây thì tôi đã hoàn toàn trên chín tần mây. Tiếc rằng đến bài thứ tư thì chỉ “Như Một Giấc Mơ.” Đang lân lân trên mây thì bị đánh thức bởi bài hát cho một phim bộ tình yêu ướt át của Hàn Quốc.

Đến đây thì Tâm quây về với sở trường pop đường mật của mình. Những bài này đều chú trọng đến cái melodic hooks. Giai điệu càng bùi thì người nghe càng dễ bị lôi cuốn nếu không bị nhàm chán. Vì âm điệu khiến tôi chán nên tôi để ý đến lời hát một tí và phát hiện là có những chỗ Tâm viết không ổn. Điển hình là bài “Lại Một Đêm Mưa.” Cô tâm sự, “Giọt mưa cứ rơi. Tiếng mưa rơi đều… Vì em nhớ anh nhớ anh rất nhiều.” Mưa rơi đều cũng nhớ anh nhiều? Sao nhạt nhẻo thế? Nếu mưa rơi không đều thì đâu cần nhớ anh.

Bài cuối của album “Sai” với điệp khúc như thế này: “Một lần hôn nhau rồi thôi / Một lần ôm nhau rồi thôi.” Có thế thôi? Không cần thêm gì nữa hả? Hôn nhau, ôm nhau mà không cháy lửa thì thật là lạ. (Đùa tí cho vui.)

Madeleine Peyroux – The Blue Room

Let’s face it. No one can replicate the one and only Ray Charles; therefore, it’s a no brainer that on her new album, The Blue Room, Madeleine Peyroux and her longtime producer Larry Klein take the opposite direction in reinterpreting Charles’ Modern Sounds in Country and Western Music, a cultural landmark album.

The mega hit “I Can’t Stop Loving You” is a perfect example. Whereas Charles built up the tune with his soulful, poignant reading, Peyroux strips the emotion down to its core and gives the lyrics a new life. The vibe is still heart-breaking, but in a much subtler way.

With “Bye Bye Love,” she slows down the tempo to focus on the song’s narrative and gives the tune an elegant swing courtesy of the tasteful accompaniment from Larry Goldings, Dean Parks, David Piltch and Jay Bellerose. With “Take These Chains,” however, she covers the tune in a mid-tempo rather than slow allowing Vince Mendoza’s sensational string arrangement to flow hypnotically around her voice.

In addition to covering Charles’s, Peyroux wisely selected newer materials that carry similar feels into the album. In her reading of Randy Newman’s “Guilty,” one could imagine how Ray Charles would have taken this song, elevated it with his soul and made it his own. While Peyroux reminds me nothing of Charles, she makes me want to go back to Brother Ray’s Birth of the Soul.

Trọng Bắc – Dấu Mưa

Trọng Bắc’s debut, Dấu Mưa, opens with an elegant rendition of Từ Công Phụng’s “Như Chiếc Que Diêm.” Trọng Bắc has a gentle baritone that blends in nicely with lyrical ballads. Having Dũng Đà Lạt behind the board isn’t a bad choice, especially when arranging his own tune, “Trong Mắt Em,” in an intoxicating bossa nova flavor.

Upon listening Trọng Bắc’s take on Diệu Hương’s “Xin Đừng Quay Lại,” Quang Dũng comes to mind. Like Quang Dũng, Trọng Bắc’s voice is quite charming and he knows how to maneuver his away around Diệu Hương’s romantic lyricism. Unlike Quang Dũng, however, Trọng Bắc doesn’t have the enunciating issue. Furthermore, Quang Dũng’s devlivery nowadays is so mechanical.

The debut closes out with Quốc Bảo’s “Còn Ta Với Nồng Nàn” showing some potentials for a homage singer rather than an innovative one. No crime in that.

Happy Monday

I have been fan of the Happy Monday podcast. Josh Long and Sarah Parmenter are doing a fantastic job of brightened my Monday commutes. The latest episode with Rachel Andrew is quite nice. I have listened to Rachel in other podcasts and I am a fan of her work, but I really love her voice. Something about her British accent and perfect enunciation sound very soothing. I actually caught up with all of the Happy Monday episode. Keep up the good work, Sazzy and Josh.

Phương Linh – Tiếng Hót Từ Bụi Mận Gai

Seven years after winning “Sao Mai Điểm Hẹn 2006,” Phương Linh releases her sophomore album, Tiếng Hót Từ Bụi Mận Gai, with intricacy, maturity and confidence.

Her take on Ngô Thụy Miên’s “Từ Giọng Hát Em” is the proof. Phương Linh’s strong, soulful voice soars and descends with such effortlessness on each note. The accompanying piano arpeggios and soft drum brushes bring out an intimate atmosphere. While the piece is not groundbreaking, Phương Linh’s performance is outstanding.

With Dương Thụ’s “Họa Mi Hót Trong Mưa,” Phương Linh shows off her range from alto to soprano. Sounding like a nightingale singing the rain when she uses her high register to imitate the bird’s voice. The simple strumming acoustic guitar is the perfect complement to her voice.

The arrangements, which were recorded live with the band, are a huge asset for Phương Linh. From the funk-jazz vibe on “Cánh Hoa Hồng Bỗng Gọi Tên Anh” to the bluesy-folksy fusion on Thuận Yến’s “Trái Tim Lang Thang” to the intoxicating waltz on Quốc Bảo’s “Niềm Đau Chìm Xuống,” the musical accompaniments enhance the singer’s voice as well as the album’s listening experience.

Learning to See Material Honesty on the Web

Two exceptional essays on web design and user experience. Oliver Reichenstein’s “Learning to See”:

In general, more advanced design is also less visible unless you’re looking for it. The customer doesn’t need to be bothered with the sketching and production of the object in order to use it. What the customer wants to understand is how the product is supposed to be used. There, the designer should aim to be as transparent as possible.

Kevin Goldman’s “Material Honesty on the Web”:

After the concepts are resolved through pen sketching, designers can work honestly with clients and design in the browser to bring the visual ideas and prototypes to life.

New Site for Dinh Cuong

In the past month, I have the pleasure of working with the well-known Vietnamese painter Dinh Cuong and his sons to create an online presence for him. One of his sons, Chinh Dinh, reached out to me to create the site as a special gift for his dad. How can I turn down a project like that? He found me through this web site and it turned out that they also live in my area.

Since Mr. Dinh Cuong and his sons are artists, working on the site was an intriguing experience. For the first time, my client wants a much simpler layout than what I had expected, which works for me since I also appreciate clean, minimal design. It also makes perfect sense to let the attention focuses on the artwork instead of the site.

One of the challenges for the project is that they want to show the complete painting without having to scroll. The web is a fluid medium. We have no control of the users’ screen size. My initial Lightbox solution didn’t do it because it was too fancy (the opacity, drop shadows and limited room for the painting info). They also prefer to see the painting on the page rather than a pop-up.

Fortunately WordPress has a nice gallery feature out of the box. The image template gives me many options to style up the design. Because the paintings come in various sizes, the vertical ones are too long for the browser window. For my personal preference, I don’t mind scrolling to see more details of the work; however, the client prefers the works to be visible on the page, at least for most desktop users. To solve the problem, I put a constraint on the image height, which means a certain image can’t be taller than a preset size (600px for example) and the width needs to adjust to the height.

The site is responsive and the backend is powered by WordPress for the ease of updates. Without further ado, here is dinhcuong.com.

Back From A Short Break

Last Thursday, five adults and three kids left two single houses, drove three hours to stay a two small condos for a few days. We dragged massive food along as well. All we did was watching the kids, eating and sleeping. It was still exhausted. Cu Dan had so much energy. He ran around all the time. We also avoided going out to eat because he would throw food all over the place. He can’t sit still for five minutes. With Cu Dao, we just gave him the iPod and he would sit still until we were done. Cu Dan isn’t into anything and he got bored so quickly. As a result, he would started to get real fussy. His voice is strong and extremely irritating. Nevertheless, we had a nice break.

After we got home yesterday, I immediately got back to work until two in the morning polishing up a client’s site. I am hoping to launch soon. Woke up three hours later and the ground was filled with snow. I snuck back in for a bit, but little Dan didn’t let me. He drank milk, peed and pooped. At that point I just woke up to shovel the snow. Our neighbor got home from her night shift and she shoveled her driveway as well. I am very envy of her husband. This lady does everything around the house. She shovels the snow in the winter and cuts grass in the summer. Last summer she even did paved the driveway herself. I hardly see the husband and their teenage daughter. I see her all the time working around the house. Whenever I see him, I just wanted to say, “Man, you’re one lucky basterd.”