Kristin Bair O’Keeffe, the author of Thirsty has a new novel titled The Art of Floating. The book is coming out in April 2014 and she asked me to design a landing page for the book. It’s a fairly small project, which is perfect for the time that I have, but I enjoy crafting it. I really love the title she came up with and can’t wait to read it.
I am proud to present a brand new site for F.H. Buckley, one of George Mason Law School of Law high-profile faculty members and a prolific writer. For this particular web site, Professor Buckley would like to highlight his books and articles. He just released The American Illness: Essays on the Rule of Law a couple weeks ago and he already has another one, The Once and Future King coming out next year.
One of the things I love working with writers is that they always have their contents ready before meeting with me to talk about the project. With the real content to work with and an idea of what the client want, the process went sleeker than smooth jazz. I had the same working experience with both Kristin Bair O’Keeffe and Jennifer Karin. They are both fantastic writers.
The design for F.H. Buckley is simple and with the focus on readability. The layout is responsive and the content is powered by WordPress. It’s always a joy for me to launch a small project like this.
After thirteen years of manual updates, I am more than glad to turn the task over to the staff in the McCaskey Alumni Association. McCaskeyAlumni.org is now powered by WordPress.
In addition to migrating the site into an easy-to-use CMS, I made some refinements to the visual design. Although this is not the first web site I have created, it was one of the early projects that started my freelance gig. It also marked a turning point for me in term of heading into the minimalist direction. McCaskeyAlumni.org was my very first experiment with simple design and it has stood the test of time.
Even with the new relaunch, the concept is still the same as when it first launched. The new layout is wider and responsive; the typography is more modern; but the general look and feel is still crisp and open with plenty of whitespace. The client is still very happy with the original design after all these years. They’re even more excited now that could make changes themselves.
Visualgui gets a few minor updates. The FancyBox, which was used primary to pop up slideshows, is now gone. Showshows are now just opened in fullscreen window. Without FancyBox, jQuery library is no longer needed. With the exception of Google Analytics, the site is now JavaScript free.
Links in portfolio sections are no longer opening in new windows. In the previous design, I used blank target because of infinite scroll. One of infinite scroll drawbacks was breaking the back button. Even though I am no longer using infinite scroll, I totally forgot to get rid of blank target. Coincidentally, my wife just complained to me that she hates it when web sites open up new windows. Although she was not referring to my site, my motto has always been that if your wife hates something you better change it.
On the visual side, the header and footer are switched from black to white. Somehow the back strip at top and bottom makes the layout look trapped. After changing it to white and I asked my wife for feedback and she said that the white makes the layout less divisive. I totally agreed. The new sticky navigation at the bottom has a very subtle transparency, which is inspired by Apple’s flat direction in the new iOS 7. Even though the flat design in iOS 7 has received tremendous negative criticisms from the design community, I predict it is going to be fantastic. Can’t go wrong with minimalism. Let’s wait and find out.
Launched a little prototype web app for Mason Law Library. This web app was developed for a graduate course (Advanced Web Design) using jQuery Mobile. The purpose of the app is to offer a set of core functions, such as searching for books, chatting with a librarian, connecting to law-related catalogs, that catered to the Law Library patrons. Please note that this is a prototype; therefore, not all features are functional. Read more about the concept of the app.
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.
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.
Jen Karin, one of my favorite clients, once again gave me a creative opportunity to do a fun project. Jen will be speaking at a conference and she wanted something to hand out to the audience. She likes the idea of giving a 4×4 card with her contact info on the front and her powerful strength message on the back. In a few hours, I came up with these designs in Illustrator. I really love a small project like this. It allows me to come up with something creative fast. For me, no project is too small. If you have something creative you need help with, do not hesitate to contact me.
Just rolled out a few updates on Mason Law. Brought back the image slider one the homepage, added more links, tightened up the typography and jazzed up the footer a bit.
While the visual only gets some minor changes, the entire CSS structure is completely rewritten using Sass. I went through line by line of CSS and convert everything into SCSS. Managing CSS with Sass is much easier and much more pleasurable. The more I use Sass the more I appreciate its maintainability. I also reduced to fewer media queries and put more focus on the mobile version.
Just rolled out PR Whiteboard blog for Matter Communications. I was brought in mainly for WordPress development. I was not responsible for any design aspect of the site. Nevertheless, the design is very nice.