Web Design Workshop #21: Tarek Anandan
tuts workshop

Web Design Workshop #21: Tarek Anandan

on Sep 14th 2012 with 34 comments

Web Design Workshop is our regular community project where we ask readers to submit their work for your friendly, constructive criticism. It’s the perfect way to learn, offer opinions and have your own work critiqued! This week, the personal portfolio of Tarek Anandan..

Rules of Engagement

Play nice! We deliberately select work which will benefit from advice and pointers. If you can’t be constructive in your comments, don’t. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.

The Design

Web Design Workshop #21

I recently redid my website–the online home of my freelance design and development operation. I’d love to get your feedback on the homepage, the layout of the case studies, and my use of typography (an area where I often struggle). As you’ll be able to tell, I went with a “long-form” layout, a nod to the recent single-page website trend. The foundation of the site is Twitter Bootstrap, but hopefully that’s hard to tell. It’s responsive and has touches of JS- and/or CSS3-powered animations in a few places (e.g., the guy on the homepage blinks occasionally). There is also a “Dreams” section where I went even further with CSS3 animations. Thanks in advance for your feedback. – Tarek Anandan

Looking for constructive criticism on your own work? Submit it for a workshop – most but not all submissions are published. Be patient though, there could be a queue..

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Jesse

    I like…the only thing is there are TONS of buttons…that’s the only thing I can say about it. Also maybe a navigation bar that is always at the top of the page.

    • http://www.technotarek.com Tarek

      Thanks for taking a look Jesse. I liked your idea for the fixed nav bar and went ahead and added one this weekend. However, I don’t understand what you mean by buttons. Do you mean links (that go to other pages on my site)?

      Thanks again.

  • Jet

    I think there is too much text. Some stats don’t provide any real value. I would get rid of them because it just more text on top of all the text you already have. The UI Design is great though.

    • http://www.technotarek.com Tarek

      Yes, the site definitely is more typographic than graphic intensive. I’m hoping my generous use of white space along with a couple of different typographic treatments help with that issue, but I appreciate the feedback nonetheless.

  • http://kanchanrai.com.np Kanchan Rai

    Good work there! I liked the top part the most, “work 9-5, live 24×7, dream 365″, its awesome! Site looks minimal and clean with enough whitespaces. Somehow, I doubt the readibility, the full white text paragraphs with dark purple backgrounds are a bit high contrast, a little hard to read.

    The project showcase slider has too much inner-shadow! But the main flaw I found on this site is Navigation. After having a look at the homepage, I wanted to view other pages and couldn’t find the site navigation menus, so I had to scroll down, search for links or navigations. I strongly suggest you to have a navigation bar somewhere on the top where we first look to browse to other pages.

    • http://www.technotarek.com Tarek

      Thanks so much for the careful review and your feedback. I went ahead and added a fixed navigation this weekend and am thinking of ways to make the main navigation menu offer access to more than the three main sections (perhaps with dropdown menus). Thanks again.

  • http://martealdesigns.com bob marteal

    Lovely work. Elegant and easy. You did a great job of keeping the amount of ‘stuff’ on each page to a minimum. Even the case study pages, which by their nature are longer, are easy to get through. The only thing i would think about, is adding some sort of call to action near the top? Smaller “Get in Touch” somewhere? Just seems like you are missing an opportunity by having them so far down. I guess it seems like I’m not 100% clear if there was a thought of “What do i want people to do on this page?” But it’s knit-picking.

    Cheers.

    • http://www.technotarek.com Tarek

      Thanks Bob. You’re right–I didn’t put myself through the very same process I demand of my own clients! I like your idea of putting a smaller ‘get in touch’ component somewhere higher up and hope to do that soon.

  • Jonnycakes

    Clean and creative, as always. I like the logo. You might consider nudging the case studies up a bit so that they’re a touch more noticeable, on my laptop screen just the heading was visible. The faded artwork in the background I only realized was artwork after trying to clean the smudge from my screen–you may consider going lighter with it so it’s more evident…but my computer is in a corner with windows on both sides so I may not be in optimal viewing conditions. I do like the 9to5, 24/7, 365 thing…it makes sense and also makes you think.

    • http://www.technotarek.com Tarek

      JC—Thanks so much for your detailed comments. I’m definitely going to take another look at the site on some different monitor resolutions (what size is your laptop?) and also consider revising the contrast of other elements. Thanks again!

  • Mark Flavin

    Overall very clean and well presented. The only thing that stands out to me is there is no significant call to action. As a visitor to the site what would you like me to do.

    • http://www.technotarek.com Tarek

      Thank you Mark for taking a look. You raise a good point–I need to make it easier for a prospective client to get in touch with me if they like what they see on the site. More revisions coming soon! Thanks again.

  • http://www.customicondesign.com Custom Icon Design

    The design looks great. very simple and clean. great background color and font color. The only thing I dont know why it doesnt have navigation. just one page website.

    • http://www.technotarek.com Tarek

      Yep, you’re right. I tweaked it this weekend and added a fixed navigation bar to the top of the site. Thanks for your feedback; I appreciate it.

  • Pingback: Web Design Workshop #21: Tarek Anandan | Webdesigntuts+ | inLine Media RSS Blog

  • Jussy

    My only real problem is that in the “slider” showing some of the projects you’ve worked on (below the Case Studies and Work Samples” section) it doesn’t look quite right having some of the items with the “more on this project” link and not on others….just seems to break the cohesiveness of the whole section like I feel like I’m missing out not reading more about those items. I’m afraid I really can’t give you any pointers on how to remedy it either….otherwise, love the choice of typography, it’s nice and reasy to read, (shows the standard light on dark readability)

    Finally, I don’t really see the logic behind the blinking “human” in the background, I know it looks cool, but it seems to be a distraction to me when I’m trying to read the content, maybe just keep it static?

    • http://www.technotarek.com Tarek

      Thanks Jussy. I really appreciate the careful review and thoughtful feedback. I completely agree re the slider, so this weekend I decided to drop it altogether. It just wasn’t working well with the rest of the design. I’m hoping prospective clients will click through onto the Work Samples/Case Studies to get a better idea for my design work. Thanks again

    • http://www.technotarek.com Tarek

      Oh, I forgot to address your point about the background artwork. I guess I just wanted to add some aesthetic spice–in a way that I don’t get do with many of my commissioned projects (for nonprofits and NGOs). I appreciate your point nonetheless and think it’s one of the reasons I chose the blinking man for the homepage over some of the more elaborate “dream” experiments on my site (http://www.technotarek.com/sky or http://www.technotarek.com/tree).

  • http://cebuwebdesign.com/ Ferdinand

    The design for me feels like an adaptation of the look and style of a windows 8 interface. Although the design and choice of color and fonts are entirely different but somehow my mind is tricking me to think that it is.

    • http://www.technotarek.com Tarek

      Interesting–I hadn’t seen the new Windows UI until your comment prompted me to search for it. I definitely see what you mean–one of the samples I saw shows that they use a similar dark purple. Thanks for taking a look and sharing your thoughts.

  • http://Wasabiweb.se Joel

    Very great looking website! I can agree with the other comments that a navigation would be nice. I also found a (bug??) when viewing the page on my ipad. The fixed header changed size when scrolling down so the three 9 to 5 etc part didnt have enough space to fit on three lines. Now they make two lines with the first two texts on line one and the last is alone at the second line with a quite weird position.

  • http://www.technotarek.com Tarek

    Thanks to all for taking a look and sharing your thoughtful feedback. It was all very constructive and helpful. Cheers and I thank you in advance for what will be version 2.1 of the site.

  • http://krishnamurthyinfo.com/ kminfo

    I really appreciate website…. its quite nice….

  • Crystal

    I like the overall look of the site. It’s clean and simple. I LOVE, LOVE, LOVE that background image…very cool.

    This has been mentioned in posts above, but I had issues with navigating the site. Just didn’t seem to flow to me. It took me a sec to figure out what the “Work 9×5″ “Live 24/7″ “Dream 365″ was about. Perhaps you could make those buttons so they look clickable and perhaps draw more attention that they are actually what you use to navigate the site. This is just my opinion, but I prefer when the links are in a row and not stacked. I just found it a bit weird that the top nav shrank, but I can’t really say why it bothered me, haha :]

    Someone has mentioned this as well, but the site is very text heavy. I don’t think there is anything wrong with that at all, I love when sites make use of typography, but everything seems to have the same weight/emphasis to me, so I found myself just kind of glancing over everything and not really reading all of that information that you were providing.

    I really liked the table you have where you list the 71 sites you’ve worked on. I think it might be a nice touch to have the section at the top of the table with the headers stay fixed, so as I scroll down I see what those dots are corresponding with in case I forgot.

    That’s all I’ve got. Again…great site :]

  • Reece Conrad

    For me, every animation on the page causes really bad flashing in Safari (version 6) on Mac (10.8.1). I wouldn’t use the page if I was a safari-only visitor. However, no problems in Chrome.

    One small thing that I might suggest is rethinking the 71+ to link to your list of web projects. Throughout the site you use a + symbol to let the user know that they can click to expand information. I expected something similar when I clicked on the + in “71+”

    I really love the layout and use of color (I like the overall subtle color/feel that the “dream” section has the best). Also, I appreciate the clever use of the shrinking header.

    • http://www.technotarek.com Tarek

      Tears–and not tears of joy. I just visited an Apple store to try to see the flickering you mentioned. It’s awful and thanks so much for bringing it to my attention. I have to think i’ts a rendering bug caused by the combo of OS 10.8 and Safari 6, because the same doesn’t occur on OS 10.7 with Safari 6.

      Thanks for your other feedback as well. It’s all appreciated. Time to research that flickering issue…

  • http://www.esparkinfo.com/ eSparkInfo

    Great design, like how clean it is and the colors are really nice too. Really like the ‘What Can I Do?’

  • http://www.neilrpearce.co.uk Neil Pearce

    I like it! However, the only thing I would add is more images, specially for the work examples section. If I was a potential client I would like to see what you can do ‘without’ needing to dig deeper. Get their attention first and foremost. Also, I like the purple in the logo (on hover)….wouldn’t that look better that color all the time?

  • Devon

    My first impression was WOW. I loved the colour and background.

    I have to agree with others that it is a bit hard to navigate; I think mainly because you have several different styles of putting the content on the page. There is the header which has nav links on the right, there are the slide outs and then there is the all on one page style. I’d stick to one or max two styles but make them obvious. I wasn’t sure I could scroll down when I first arrived so I clicked through the header links and thought the site was really short. Perhaps go with the vertical all-on-one page layout for each of the three sections in the header and skip the slide-outs etc. Make it obvious there is more content below. If you do use this for work I would suggest putting your contact info in the header or on the first view of the page to make it easy for potential customers to contact you.

    I also found the header transition a bit choppy while scrolling; maybe cut down the number of steps or just have it transition once the user has started scrolling.

    It’s also a little creepy when the background blinks. :P

    Cheers,
    Devon

  • Adam

    Yeah I have to agree with everyone about the navigation. Whilst I love the idea of work / live / dream….. I dont think it works as a navigation, and could maybe be used as a slogan under your logo instead?

    Also agree that some sort of graphic is needed to break up the text.

    Other than that great work :)

  • Oliver Dionela

    Very nice background and font colors. But I think the Customers section could use a little bit more of styling/adding some icons to make it not look text-heavy.
    PS: Maaaan! Good taste in music and you’ve been to some great shows! (Schlog) :-)

  • Akshat Srivastava

    The site’s great. How about a better color for <a> hovers? Also, I suggest that you add some easing transitions for the hover states, looks great.

  • http://www.creativethien.com John Tran

    Love the site man, good example of a minimalist type heavy site. My issues with the site look like they have been addressed by everyone else all ready.

    Dislike:
    The font sizes seem to similar, for each main section like Skills, the next level item appear almost the same size. I would prefer if there was a much larger visual que that these items are on different levels. Larger font, or some other way to bring attention to the heading. Maybe a small icon?

    I don’t like the background image, however looks like it’s just a personal task thing considering the other commenter ‘s loved it.

    Don’t like the 1st text part, About. Maybe could recreate this section to include a different color font as well as different sizes on some of the words or sentences. I could easily see you highlighting the words “freelance website development consultant” then build the rest of the section around that phrase.

  • http://erasmusfrench.weebly.com/ Rajaryan

    The style looks excellent. very easy and fresh.
    excellent backdrop shade and typeface shade.
    The only factor I don’t know why it doesn’t have routing. just one web page web page…!!