New website launched
This has been a long time coming! I have been planning to re-design my website for months (since the start of the new year). But, being so busy it is hard to do everything, and especially hard to find time to work on your own website. In general, there wasn’t anything wrong with my previous site… but being the extreme perfectionist that I am, I was never really happy with it. I wanted to design something that better reflected who I am as a Designer.
I needed to go back to my minimalist roots – where I was always most comfortable.
Over time, my previous site started to get a bit cluttered – my own fault really. But the more things I discovered about WordPress, the more things I wanted to include in my site – big mistake. One major concern of mine was that the non-web savvy visitors may not fully appreciate the new minimal design. But then I asked myself… do I care if they don’t? And in short, my answer was no.
The goal of this re-design was for me to develop something minimalist, technically solid, and beautiful to give my blog readers a much better experience on the site.
Not everybody views source code, but I know there are a lot of people that visit my site that do. I am a Designer that can code, but in my last site the markup was starting to get untidy. But now, under the hood the code is valid, and as pretty as possible. I spent a lot of time handcrafting this site. If you take your time to explore the design you will find the little bits of jQuery and CSS3 loveliness that make the user experience that little bit better.
If you are viewing this site in Chrome or Safari you will be seeing the loveliness of the CSS3 transitions on the navigation in the header and footer. And if you are viewing this site in Firefox, you will see most of the CSS3 loveliness including rounded corners, but not the CSS3 transitions. But… if you are unfortunate enough to be viewing this site in Internet Explorer, you will be seeing things a little less refined, but it will work nonetheless. I’m all about progressive enhancement – my sites will always work in all browsers, but the better browsers will show the fancy interface enhancements.
I love typography. And I spent a lot of time working on the site typography getting it just right. On any website, the typography is one of the key things that can have a real impact on the way the users perceive your site (even though they may not be conscious of it). I’m using Typekit to serve up the gorgeous heading fonts, which are Proxima Nova, and Gesta (for navigation).
I could probably write all evening about this (I may blog about this again and go into more detail about the technical side of things), but I wanted to keep it short and sweet – I have about another 10 blog posts in the pipeline to write, so I wanted to just get this one out there!
I know I’m a lot happier with it, but what are your thoughts?
Related articles:
- The Tweet Moods aggregator
- Web Designers who can’t code anything?
- Misconceptions about Web Designers
- New Year… New Logo
- Do you really need a degree to work as a Designer?
Hi Mark, I really like the new design. You certainly managed to keep it minimalist and it’s nice that it isn’t drastically different from the old one. People will still know it’s your site they’re visiting and not someone else’s.
The first part homepage really reminds me of my own portfolio (which is offline for over a half a year now) here is a screen shot of mine: http://bit.ly/dmPFNg
Overall the website is very clear and very easy to read. If I can be so rude, I do want to mention two things:
First I wouldn’t use to may bold and italic styles in your articles, I think they distract the reader and they are not really needed. The large streamer like texts are the one that get the extra attention so in my opinion there’s no need for the bold and italic text.
Secondly, and you’re probably not going to do this, it would be awesome if the pattern in the back would be used as a baseline reference for the text. If all text started on the horizontal lines of the background it would look great, I think.. I do understand it’s probably a lot of work, but it would be a nice extra touch!
I hope you aren’t offended by my comment, don’t get me wrong, I really like this new minimalist design.
Regards,
Guido
Thanks for the comment, Guido!
Of course I’m not offended – all feedback is appreciated, and I find it interesting learning what other people think of the way I’m setting the type. To say I always get it right… that would be quite arrogant of me.
I do the bold and italic bits intentionally though, but perhaps I’m over emphasizing? It’s interesting that you should point that out though.
Some people would say though that having large blocks of text without any different distribution of weights can make the text a little more daunting to read – so that is along the lines I’m thinking with the way I’m setting the type. Or is it the opposite for you? Perhaps I’m setting the type well enough to not have to do much weight distribution?
As for the using the background grid as a base for the text to rest on… that would be technically very difficult indeed, but I know what you mean. Hopefully the grid isn’t too overbearing and it shouldn’t interfere with the type too much.
I got your tweet about the footer navigation – I was going to include some technical stuff about that in my post, but I wanted to keep it short and sweet. I used CSS3 transitions to do that hover effect on the links – it’s all done using CSS3 code… a very clean ( and new), efficient way of doing the same thing as Flash.
Well I think you don’t need to have any weight distribution, for me it’s more disruption (: Your comment, which is without any bold or italic styles, is really easy to read. Therefore I think it’s kind of overkill, your type is good for big blocks of text. Adding a link or two is fine, it adds just a little color to the post. I also like the use of the lighter color for some of the type.
I did expect that would be a lot of work, you probably have to alter the pattern and your, very clean, CSS document. The grid isn’t interfering with the type, it’s easy to read so don’t worry about it.
Nice to see those functions in CSS3, I’m just (re-)starting with html and css so there’s a lot to learn! The past year I’ve been working a lot with Flash, mainly actionscript 2.0, which was fun but kind of useless.. I think flash is going to disappear with the rise of HTML5 and CSS3. But that’s a whole different discussion!
I unbolded a few items in the article – how does it look now? Is that easier to read?
One key feature of this new layout is that I can use large images in my articles too, so ultimately the articles should start to get prettier and prettier over time.
About 4 years ago I used Flash a lot, but yes it is getting a bit redundant for Web Design. jQuery and CSS3 would be the new Flash – you can do a lot of the same things that Designers would have previously used Flash for. I haven’t used HTML5 much yet, but that will be my next conquest. If you get stuck and have any questions about your CSS you can always tweet me!
I’m a visual person so I can’t give loads of technical critique, but I know what I like and I like this.
B
For me, it’s easier to read indeed. What will be the width of the images? The same width as the large text I think? Should be looking good.
Well I haven’t used any HTML for about a year or so.. I’m going to the FOWD2010, with lectures about HTML5 & CSS3. Afterwards I like to start coding my own website and stuff (: You would wish you never said that, I’ll be stalking you with questions about CSS!
Looking forward to future blog posts, with images!
@Bronagh/Resolution Art – Thanks! I use squared paper all the time, so I had to incorporate that into the design. Websites are a very personal thing, but at the same time it needs to appeal to your target audience, which I think… this one should achieve too.
@Guido – Yeah the main article images will be big! I have styled the articles so that the paragraph width is a tidy 700px, but everything else can spread out the full 940px – That way everything is big and beautiful, but will still fit inside almost any modern screen size of 1024px and above (and still go widescreen on Mac’s).
I have always plenty of time to answer questions about CSS and stuff, so that’s no problem!
I’m a sucker for clean sites, and I think the work you’ve done is top drawer.
I’v taken a peak at your code and it all looks squeaky clean too, the little finishing touches of CSS3 really play out nicely too.
Well done Sir!
Thanks Pete – I’m glad you dig it!
I wanted to make it as pretty as possible under the hood because I know that’s one of the first things Web Designers/Developers look at once they land on your site – I always do it! This version of my site says a lot more about me, so people will get a better feel for what I’m all about.
I’m happy with the solid base I have with this one now, and the feedback has been really positive (so far). Some days I feel like I should be removed from my mac by force to stop me from further fiddling with things, but I think that is a curse every designer has (some times for the better, some times for the worse)!
Looks nice, much tider and together than the last design, which you have already hinted at above.
A quick thing I’ve noticed since filling out this comment is that your comment box has a :focus state but the website input box above don’t seem to, it just seems to have a hover state.
Thanks for pointing that out Jack! I never even noticed it because I’m always logged in as the admin. I got it resolved swiftly though.