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.
My initial intention for I Love Ngoc Lan was to bring the markups and CSS up to date and to make the layout responsive, but then I ended up with a redesign. The new layout has only one column because I wanted to focus on readability. Once users get past the homepage, which features a large banner, everything else is just clean text. The navigation has moved to the bottom instead on the right column to put the emphasis on readability.
The new design is responsive with mobile-first approach. The markup is based on HTML5 Boilerplate and dashes of CSS3 fanciness. I Love Ngoc Lan had been powered by WordPress since 2003. At the time, I didn’t know how the site would turned out and I used WordPress simply because it was the easiest solution. Now the site has grown into a very nice community and I am so glad that I picked WordPress. It has proven to be the perfect choice.
When I met with a student to discuss about moving his organization web site into an open source content management system, I suggested WordPress and his face lit up. He was glad that he didn’t have to work with Drupal anymore. My predecessor set him up with a Drupal 6 installation for him to experiment with and yet he still has not quite learned how to create a simple Drupal theme.
My first approach was to intall WordPress on our server and then to provide him administration access to create the site himself, but then what happen if other student organizations, which scattered all over George Mason servers and some hosted themselves, would like to come on board? I would have to create individual WordPress. That didn’t sound like a scalable plan so I decided to experiment with WordPress’s multisite. It turns out to be a great solution and this is my first time using multisite feature.
Now I only have to maintain one installation of WordPress and creating new sites is just a clicks away. One of the advantages of using multisite is that the students can create their own design if they want to, but I have to install the theme. That way I can check the codes to make sure they are safe and secured.
I created a default theme, which is a child theme of WordPress’s Twenty Eleven, for the student organization main site. The students can use it just as it like this one or they can come up with their own theme.
I am also in the process of creating another network of sites just for the faculty so they can update the content themselves without having to know HTML. Multisite is another reason WordPress rocks!
Our previous client who we worked together on United Green Solutions returns to us for a small site design to advertise his new business: Renew Body Contour. Even though the site only has a few pages, we didn’t take the shortcut because we value every customer’s project.
We made sure that the site is fully developed and functioned properly on all devices. Since the site will also be used as a landing page for ads, we want the site to be optimized for mobile phones and tablets. We made the design responsive using HTML5 and CSS3. We also used HTML5 Boilerplate and customized Modernizr for backward compatibility.