New CircularSoft Website
Since going full-time with CircularSoft earlier this spring, I have wanted to revamp the company website to look more modern as well as better reflect what the company does (www.circularsoft.net). The original site was created a couple of years ago as a quick web presence that I could direct people towards. The original site had the bare minimum: quick blurb about services, a poor little portfolio, and a simple contact us form. The design of the site was actually a free HTML template I found online (I was REALLY going for a quick website.)
Here is the quick overview on how I created the new website…
Design
With the new site, I didn’t want to spend too much time actually building it. I had started a new website around a year and a half ago, but I made it too ambitious (i.e. client login, some management tasks, dynamic information, etc…) I wanted this version to be quick (mostly static information) but stylish.
I opted for a single page design due to the fact that it would be easy, but it would also force me to really simplify and condense what information I wanted to present. I create a quick mockup of what I wanted (see below.)
As you can see, I kept it to three sections: Services, portfolio, and contact us. I wanted to have some texture to the site as well. I was able to find an image of a torn piece of paper and with a little Photoshop love, I was able to create a header I liked. The dark background was also given some texture with a little help from Subtle Patterns website (www.subtlepatterns.com).
Technology
Even though I wanted the site to be simple, I still wanted to show off a little of the technology that I use on a daily basis.
- Microsoft .NET – The site is a ASP.NET MVC 4 web application
- 960 grid system (www.960.gs) – This CSS-based web layout framework allows me to easily place things on the screen with ease.
- Google Web Fonts Service (http://www.google.com/webfonts/) – This service by Google allows for me to put more stylish fonts on my website than the standard “web approved” fonts. With some testing, the font I selected worked great in Chrome, Firefox, IE, Safari desktop, and Safari mobile (both iPhone and iPad.)
- jQuery – there are two areas where jQuery is used. The lightbox that allows someone to browse through the portfolio is a jQuery plugin called Slimbox2 (http://www.digitalia.be/software/slimbox2). Also, I used jQuery to handle the AJAX contact us form submission.
- AJAX and JSON – Most of the page is static HTML. But I wanted the contact us form to be handled in-page without a page refresh. With a .NET backend, I utilized jQuery to send information the server to submit a message, but also handle errors and any information that comes back from the server. The submit button at the bottom of the form gives visual feedback to the user as to what is going on with the submission. The buttons were created using http://www.cssbuttongenerator.com/
In total, it took about 15 hours to put this website together (which I am very happy about because I have other things to do!) I am really pleased by how it come out. Let me know what you think of the site!
CircularSoft Website – http://www.circularsoft.net
Comments