A peek inside a simple website design

I’m really excited today to announce the re-development of our main company website Web Circle. Here is a screenshot of the final site which you can click on to be taken to the site.

The new ‘simple’ Web Circle site.

In re-designing this site my focus was on simplicity. We started working on it about 2 months ago when I decided I wanted a site that represented the way we approach designing and building sites and apps. I also wanted to do this without overloading the site with content. 

Looking at it now I’m very happy with the result and I do think it achieves this but there was a lot of work put into something that was supposed to be ‘simple’.

So I thought it would be a good idea to give people an idea of some of the things built into this site and the amount of work involved.

  • The design itself took about 3 weeks to get finalised (not 3 weeks non stop) but there was a lot of fiddling around with the design to get the concept right including a total re-branding (scrapping our logo in favour of very simple letters only, new colours, fonts etc). Anything that wasn’t necessary was removed (time will tell whether we got this balance right, some people might think there were some things left out that were necessary).
  • The fonts used are done through Typekit to enable us to have a nice, slightly different font but still have it display properly across multiple platforms.
  • The illustrations had to be commissioned for the site (I had mine already, Kellie and Steve’s are new).
  • All images on the site are replaced with double resolution images for display on the new iPad. See How to optimise websites for the new iPad for more on how this is done. This required some screenshots to be taken on the iPad, other images to be sourced in high resolution and some to be manipulated a bit after they were taken (not all source example files were originally designed in high resolution).
  • I wanted to animate the top menu but I didn’t want to use Flash. So we developed it using JavaScript and it now works across platforms (extra code was required so that on tablets and mobiles (which don’t have mouse overs) it animates on touch and then shortly after it navigates to the page). The code used to achieve this animation was written using Raphael js. To get these buttons working took 8 hours just by themselves.
  • The animating of the main 3 homepage images and the inner page sliders was all done using JavaScript and works cross browser. If you look closely you’ll see the background image fade in and then out very slightly.
  • The footer ‘More’ button that animates across is done as a custom script that brings in a WordPress page and loads in the links on each page as a menu.
  • All of the links on the site fade into a new colour when hovered over – this was done using custom JavaScript.

I’m sure there is more than that but I think that gives you some idea of what can go into a website like this.

What do you think?

Feel free to check out the new Web Circle site and let me know what you think.

I’d love to know whether you like it and any thoughts you have on simplicity and why it’s so darn complex!

Tags: , , , ,

About Alex

Alex Retzlaff is the owner of A Website Designer and Web Circle.

Follow us at:
Twitter @webcircle
Facebook /webcircle
Web Circle website

32 Responses to “A peek inside a simple website design”

  1. Aaron Eden April 13, 2012 at 7:22 pm #

    Dan, love the zen approach and the images (instead of photos). The bios step away from the lengthy stuff we normally read and I like the personal approach. To your success!

  2. Dan April 14, 2012 at 3:03 pm #

    Thanks Aaron I appreciated it.

  3. Jacob April 26, 2012 at 8:11 pm #

    Much love to the webcircle team… love their website… minimalistic and downright beautiful !! I want them to design my next website :)

  4. Dan April 26, 2012 at 8:35 pm #

    He he, we like you….

  5. Pavel April 28, 2012 at 4:19 am #

    Deciding not to use flash and using Java instead was a great idea. With Apple’s inability to play Flash and the popularity of Apple’s mobile devices, using Flash alternatives like Java or HTML5 is the way to go, especially if you are optimizing your new website for iPad and iPhone.

  6. Rita Kunnan April 28, 2012 at 5:41 pm #

    Hey Dan,

    Kudos to your team for having created such a beautiful website. I just loved the simple, minimalistic design approach that you guys stuck to. The faded background images look wonderful and these illustrations are so cool. The use of colors is brilliant, plain back & white make the whole thing very natural and neat. All in all, great job.

    Cheers :)

  7. Dan April 30, 2012 at 9:20 am #

    Wow thanks! You’re welcome here any time :)

  8. Dan April 30, 2012 at 9:21 am #

    Hey mate thanks, yeah I’m no fan of Flash that’s for sure.

  9. Allard May 3, 2012 at 6:05 pm #

    Is the design based on the 960 grid system or is that outdated already?
    Besides that it looks rather nice! I love minimal in design and the sketches are of great quality!

  10. Dan May 3, 2012 at 7:41 pm #

    Thanks, yeah we still generally stick to 960px. Here is a post I posted a while ago but updated recently about it http://awebsitedesigner.com.au/website-design/fixed-vs-variable-width-web-design/

  11. Zeidan May 3, 2012 at 9:58 pm #

    One ff the simplest and cool site i have ever seen on web design and apps. Nice design!!
    Appreciate Web Circle Team.

  12. Dan May 4, 2012 at 1:38 pm #

    Thanks!

  13. Diary Writer May 9, 2012 at 9:33 pm #

    I always love Minimal designs, so I use thesis for my site and customize it for my own unique look. Here, i love your approach to clean designs and specially, the image you’ve used. Its awesome

  14. Dan May 10, 2012 at 5:46 pm #

    Thanks, I haven’t used Thesis but I’ve heard good things.

  15. Menno Bos May 18, 2012 at 12:24 am #

    Love it, I really love how you did the buttons. I should really go look into javascript one day. I’ve seen more people doing awesome things with it.

  16. Darby D. May 23, 2012 at 1:50 am #

    Great information Dan. It seems some people would rather have a website that does “everything” but this tends to make it very “busy.” I can’t speak for others, but when I personally come to a site like this, I retreat because I’m not looking to spend 10 minutes just nagivating the site to find my destination. :)

  17. Dan May 23, 2012 at 9:41 am #

    10 minutes? Well I guess it depends what you come there for. The site is primarily for people who are interested in engaging us to build them a website or an app. The big ‘mobile apps’ ‘web apps’ and ‘website squares’ on the homepage should be pretty clear. It’s a very simple site, if they are there for some other reason then I don’t mind if they leave.

  18. Jaspreet Chahal June 11, 2012 at 11:31 am #

    Greeting from Melbourne :)
    Pardon me If I am taking it a bit far but I think webcircle’s home page would be more attractive if you use 3 different color overlays for mobile apps, webapps and websites respectively other than just grey overlay. But man it looks cool and a bit different to all other websites we see now a days, where home page layout is Header, then an Image Slider, 3 boxes aligned horizontally and then a footer. Cool job..
    Cheers
    Jas

  19. Dan June 12, 2012 at 2:51 pm #

    Hey mate thanks for the comment, yeah that could look good.

  20. John June 21, 2012 at 4:36 pm #

    I have to agree with Zeidan about how simple and how cool your site looks. Back in highschool we used to do simple html design using notepad but I just seriously suck at it. Anyhow, great work Dan.

  21. Jarell June 21, 2012 at 11:42 pm #

    You are right Jaspreet, it would have looked great if it had 3 colors but I still prefer black and white. Look so neat and unique aswell.

  22. Dan June 22, 2012 at 10:03 am #

    Thanks John

  23. Jaden Flores August 5, 2012 at 6:02 pm #

    Thank you so much for your expert tips. I run a tuition center and plan to build a website where students can register and make payments online. This came up very useful. Anyways, I have to brush up JS a little bit. Keep updating.

  24. Alex August 9, 2012 at 11:48 pm #

    Hi Jaden, you are welcome (on behalf of Dan). I hope to be able to keep up with great posts like this one.

  25. Dicky October 2, 2012 at 5:23 pm #

    Hi Dan. Your site very good andcyou look very talent to create web . Good luck for you forefer.

  26. Alex October 3, 2012 at 9:49 pm #

    Hi Dicky. Thanks for your kind words. Dan has certainly created some great content and we hope to continue in that tradition.

  27. Jim Vibernagy October 19, 2012 at 6:37 pm #

    I just checked your website and I think it’s beautifull because it’s plain and simple. No distraction for the visitor so easy to use.

  28. Oliver November 18, 2012 at 11:11 pm #

    I think it is becoming more important to design clean easy to read websites. Especially when you consider that there are so many different ways to now view a web page. Some users will use a desktop others can use mobile devices or pc tablets.

  29. Alex November 18, 2012 at 11:46 pm #

    Good point, Oliver. With so many different devices, simple is best. There are, however, ways to offer different versions of a site, depending on the device calling for it.

  30. Dennis January 21, 2013 at 11:13 pm #

    I must say the design looks very clean and classy. This design is very friendly for your visitors as well as it is easy to navigate through.
    Thumbs up!

  31. Pranesh February 22, 2013 at 12:15 am #

    Great design and nice smooth transitions..but I’m not sure if it’s my network issue, the loading took some time.

  32. Alex February 22, 2013 at 3:20 pm #

    Hi Pranesh. Thanks for the compliments, and I understand about the loading time. First visit to the site does require a bit more. On my system just now, 12 seconds. On subsequent visits (unless you clear your cache) it can be 1-3 seconds. That’s certainly not a minor drawback. Visitors with slower connections may see far longer load times and that can prove deadly on bounce rates and low return rates. Thanks for the feedback.

Leave a Reply