After more than a decade, one of my longest clients, the Lancaster Education Foundation, is moving into WordPress. That means the staff members can now update the site themselves.

I actually made the proposal to use WordPress to manage their contents a few years ago, but they hesitated to do so. Recently they hired a new, young director and she’s quite web savvy. Not only we migrated the content over, we also integrated the blog so she could use the platform to communicate.

The template is based on Twenty Twelve, which looks almost the same as my original design a few years ago, with many details polished and modified. Sass is such a useful tool for changing and compressing CSS without touching the default style.

My biggest accomplishment for this project is to finally handing the key over to the owner for updates.

Right before Christmas break, I received a referral from Jennifer Karin, who is one of my favorite clients, to work on a project for her husband. Dr. Chris Sidford who owns Black Bag, a private emergency medical consultancy, needed a completely revamp of his web site. He would like the new site to be attractive, responsive, optimized for search engines and manageable through WordPress. (I have a feeling that Jen came up with the requirements herself.)

I was planning on taking my Christmas break and not doing any work because I was burnt out from grad school, but I couldn’t resist the opportunity. Dr. Sidford turns out to be a fantastic guy to work with just like his wife. I have the complete freedom to redesign the web site based on existing contents. The logo is the only visual element that I need to keep. Since the logo was set in Baskerville, I started with that typeface to set the tone for the body text. I found a nice, legible version of Libre Baskerville on Google web fonts to be used for the main copy and complemented with Open Sans Condensed for the headlines. They turned out to be a perfect match. For color, I used the red ribbon for links and standout elements.

As for the homepage, I put myself in the user’s perspective when I designed the layout. Since Black Bag is about emergency services, the first impression I would want to convey is trust. Can I trust this service? Nothing could get that message across better than the face of the people behind the agency. The nice, friendly photo of Dr. Sidford assures me that I can trust this guy when I am in an emergency situation; therefore, I used it as the main attraction.

Per the client’s request, WordPress is implemented for managing contents and the design is responsive to be displayed on various digital devices. For the first time I didn’t have to convinced my client that responsive is the approach to take. That’s one of the reasons I enjoy working with return and referral clients.

So go check out Black Bag. You might be interested in this unique, personal, immediate physician access, especially if you travel to foreign countries.

I can’t believe I am actually doing print work. Updated the graphic section with three new pieces from my Advanced Typography class. The latest piece is the restaurant menu design (pdf). The other pieces are from the previous projects: movie posters (pdf) and film rating system (pdf). More to come at the end of the year.

In the past few weeks, I recollected most of the designs I have done in the past for Visualgui and made screenshots out of them for posterity. Obviously I don’t have everything, but close enough to give an idea of how the design has evolve over the years. It does seem to get simpler and simpler. Check out the history.

It’s my pleasure to present the new redesign of Poplar Springs, a family-owned restaurant, spa and hotel nestled in northern Virginia’s wine country. Working on the project over the last six months had been challenging but also rewarding.

When I first met the owner and chef Howard Foer and his team, I knew immediately they would need a content strategist. Mary Dempsey, a fantastic writer and journalist who I had the pleasure to work with at The George Washington University School of Business, came to mind. We brought her on board and she did an outstanding job of getting the contents from the client and writing them in a short, concise approach. Our collaboration worked out so well that I would love to bring her on for future projects.

With the content out of my way, I was able to focus on the design and development part of the site. My first task was to redesign the logo. The previous logo was slapped together using Edwardian Script. The logo looked outdated and not legible. With the new design, I kept the poplar leaf and used clean, thin Futura for a modern look and feel. With the new brand, I created a simple layout to show off the beautiful property, the mouth-watering dishes and the relaxing activities in the countryside.

The front-end design was built using HTML5 and CSS3 with a responsive layout. The most impressive part of the site is using MODx Revolution as a content management system. Before selecting a CMS for the site, I faced with two choices: WordPress and MODX. Poplar Springs is not a complex site; therefore, both platform could do the job well. WordPress could have been an easier choice for me, but I determined to use the project to learn MODX. Nothing beats learning by actually doing it. It was quite an incredible journey. Even though I ran into the wall in a few stages, I have learned so much about MODX. After this project, MODX will be my choice of CMS moving forward. With just a bit of knowledge, I could build the entire site with the exact codes I marked up. Nothing makes a designer happier than viewing the source code to see the exact output he had intended. Try that with Drupal.

I am extremely satisfied with the outcome of the site. Thanks to Howard and his team for putting their trust in me and thanks to Mary for a fruitful teamwork.

Visualgui gets some small but necessary visual tweaks. The new brand is set in Krona One by Yvonne Schüttle. I like the clean sans serif style with a touch of personality. The colors in “GUI” make the brand pop a bit.

Speaking of my brand, I am my own worst critic. I keep changing it because I never completely satisfy of it. One of these days, I’ll gather all the designs I have done for my own brand and call it “Identity Crisis.” Truth be told, the name is a bit vague. It’s actually a play off of “Visual Guy.” I have thought of commissioning one of my fellow graphic designers to do it for me, but I want to get over my own challenge.

One of my constraints is that the brand has to be text and not image text for various reasons including accessibility, but web typeface just looks much crispier. Thanks to the new CSS3 @font-face, the challenge it not as crucial as before. I also love the ability to play with CSS on the brand.

As far as responsive design, it has become part of my workflow. It would feel weird if I don’t make the site responsive and I wouldn’t take on a job if my clients say they don’t need a responsive design. Sure, responsive design is not a bulletproof for every project, but I don’t see why it shouldn’t be. If the desktop site looks great, I don’t see why you can’t tailor it for small screen devices. With this realignment, I wanted to push for more flexibility. The menu strip, the homepage banner, the footer and the graphic section are all set in 100% width.

Major visual update has to be the colors for each section. For the site, motion and graphic sections, I wanted to use a dark color that would make the screenshots pop more. Trying out the colors had been quite time-consuming.

Look around and I hope you enjoy the updates. This is it for a while. I seriously need to stop tinkering around with this site. I spend way too much time sweating the little details.

Created an email newsletter template for Mason Law. The layout is simple and responsive.

I also reworked my portfolio for Mason’s School of Art & Design graduate program. Markup and CSS has been streamlined. Speaking of school, I’ll start classes in the fall with Graduate Design Seminars and Advanced Typography. I am not sure what the Seminars are about, but am looking forward to Advanced Typography. I actually have never taken any course in typography before. Everything I have learned up to these points are from reading and practicing on the web. I am excited to get formal training in design.

When I checked out the Senior Show to see what the students had done for their final project, I sort of having an idea of what I want to do with mine if I ever make it there. It would have to do with Miles.

When I took on the position of web services developer at the Law School, I didn’t even know what a command line is, and yet most of the tasks that I would need to do were through the text-based interface. I sat down with the previous developer for one day and he overwhelmed me with all the commands.

As I started my new job, I had to explore my way around Linux environment. I didn’t know what I was doing, but I picked books and learn on the job. Every time there was a request, I didn’t know what to do. Nothing was written down so I had to contact my predecessor. Fortunately he was very responsive to my questions, but I still felt bad that I had to bug him.

Whenever he explained to me something, I took notes and kept them so that I could refer to them later. Now I would like to keep all of that valuable information somewhere so that I won’t be the only one to know do a certain tasks. If I were to move on, which is very unlikely because I love this job, the new person can have all the information accessible to him.

A blog would be a great place to keep all of these information so I started the Web Services Blog. Since our blog network is powered by WordPress multisite, creating a new blog is just a few simple clicks.

The primary purpose of the blog is to house the documentations, but I wanted to expanded to web-related topics like latest projects at Mason Law, current trends, practices, and emerging technologies in the web industry. I also hope that the information could be useful to the public.

After a decade of working on the web, I am still fond of simplicity. With each redesign, my goal is to simplify the layout and the markups. The new Visualgui is no exception and the focus is on readability.

To accomplish the new goals, I had taken the content-first approach. The layout is reduced to one column and the sidebar is dropped to make the content front and center. Typography is the most crucial part of the redesign, but I actually don’t have too many choices because I want the site to render appropriate Vietnamese characters. Google Web Fonts only has three Vietnamese types and I used two out of three. Headers and logo are using Open Sans by Steve Matteson and body text is using Noticia Text by JM Solé. The two types are quite decent and I am satisfied with the pairing.

In the previous design, the homepage always had to have a banner and the width had to be 940px. With the new design, I want the banner to be optional and flexible. I don’t always have to have one and I can crop the banner any size I want. As for the background color, I am moving off white a bit for less glaring. The color choice is inspired by e-reading devices like Kindle and Nook.

With one column, the markup is now much lighter. HTML is streamlined and modified to not depend on Shiv or Modernizr for IE6-8. CSS is also simplified by hand. I must confess, I have not wrapped my head around LESS or SASS. Of course the new site wouldn’t be completed without responsive design.

Strength is a motivational message written by Jennifer Karin. I discovered this hidden treasure when I redesigned her personal web site. The message was put together as an image, which I didn’t find it to be usable. Last night I whipped together an HTML page. I also wanted the message to be passed around through mobile devices as well. My main focus is on the message; therefore, I chose Calluna, courtesy of TypeKit and used colors for the emphasis. So read it, remember it, feel it, embrace it and share it.