Grow your CSS skills. Land your dream job.

Thoughts on design and copy

  • # April 16, 2013 at 12:22 pm

    @cwork, haha, thanks! I’ve made the site using Zend Framework 2, surely not the easiest way to get a site and blog up but I have my reasons. I need the experience (mainly in PHP but I like to learn ZF2 more too), I can make it exactly how I want it and I will upload the blog module to github when it’s finished to get the publicity (there is no blog module for ZF2 yet, it will be listed [here](http://modules.zendframework.com/) and [here](https://packagist.org/)). The copyright looks indeed off, I will take a look at it, thanks again!

    @AlenAbdula, ouch! But thanks :P The thing is I need to impress potential clients, not (other) designers and developers. Designers are not that easy to impress.

    You say minimal design with lots of interactivity. Does that mean you’d say the design is okay as it is now if I add more interactivity and JS awesomeness? Only thing I can think of right now is to make that static image some kind of parallax slider. I’ll try to think of more, as long as it’s subtle. I don’t want my website to be a circus ;)

    # April 16, 2013 at 12:51 pm

    @CrocoDillon, I agree with @AlenAbdula, from your posts on these forums, you seem to be a bit of a JS guru, and there’s not much interactivity in your site to showcase that.

    Other than that, I like the simplicity your site has. Well done.

    # April 16, 2013 at 3:16 pm

    @CrocoDillon, I’m genuinely giving feedback. I hate all the ego-stroking that happens on many forums. So, I try to tell it the way it is (or at least how I see it). I strongly suggest you focus on your strengths and slowly build up your design skills. Especially if you plan on getting paid for your work. When you are trying to book a client you can’t sit there and be uncomfortable about your design skills, but at the same time try to convince the client to hand over thousands of dollars. You need to communicate your value to the client, and your values are your strengths not weaknesses. Hope that helps.

    When I say minimal design, this comes to mind:

    http://www.eduardonunes.me

    http://studionudge.com/

    http://www.sennep.com

    # April 16, 2013 at 4:26 pm

    Now you’re making my head hurt! I can’t redesign the whole thing, I need to get it finished. I’ll keep what you said in mind and appreciate any feedback :)

    I can add some interactivity though. Just need to figure out where it’s appropriate and not overdone. There will be more opportunities to do so on larger pages.

    @ChrisP, thanks :) I’ll work on the interactivity.

    # April 16, 2013 at 6:03 pm

    If you don’t redesign the whole thing, I’d say once you get it in a finished state, start think about v2 right away. I agree that from what I’ve seen of your talents, a minimalist site is the way to go.

    Ideally, I think you should do some javascript voodoo in that middle large area on the homepage if you click or hover over those 3 sections below. Those are VERY cool BTW and that’s the kind of stuff that sets you apart on the surface when someone first sees the site.

    Also, try and stay away from words like “Gravatar” :) That’s a design/web world word. Your site is for potential clients.

    # April 16, 2013 at 8:16 pm

    Didn’t read through all the comments but heres my input as a designer and dev:

    You are going for a flat look, so why the drop shadows? If you want them, just use them as hover states. But the first rule of flat design is designing flat. Shadows are adding dimension, so pick one or the other.

    The logo is -alright- but could use kerning help. I honestly don’t really like it, but try to make a monogram or icon to add something to it. I can in vision a circle with a croc head in it or something. I’d suggest looking more professional though and use your real name.

    The header is weird. You have the footer expanding the entire width, i’d suggest doing the same with the header.

    Hover states with the nav are fine. But for the flat look, I’d suggest removing the shadows again. Keep them moving and changing colors though. Also maybe have the typeface be the same green on hover and current page.

    Footer stitched look is a bit out of date imo. Also the class on the html element has a border-bottom. Remove it. It just looks like a mistake. Or make it larger.

    Edit: In chrome when I hover over one of the three hover state icon areas, the logo jitters for the duration of the transition.

    # April 16, 2013 at 9:31 pm

    @Jeager makes some really great points. Especially on the kerning issue. Unfortunately, this isn’t one you can fix via negative letter-spacing. And I would honestly not waste time using a JS script to force it.

    Edit: Also, the line-height on the paragraph text under the 3 tech sections (Modern, Compatible, Mobile) is a bit too much.

    Click to see large version

    Above, I removed the gray backgrounds on the site. I think it significantly improves it overall. In fact, this sort of makes me want to procrastinate on my own and help you with yours. Ha. But to make it work, you still need to do some work.

    # April 16, 2013 at 9:52 pm

    I like @chrisburton‘s approach, I would make the menu on the same line, as the logo menu feels out of place right above the graphic. You might also consider re-doing the mobile,tablet and desktop graphic and replacing them with more realistic representation. Now it just draws too much attention but visually it’s nothing polished.

    # April 17, 2013 at 6:43 am

    @JoshWhite, I’ve started thinking about v2 before I had started on v1 ;)

    As for javascript voodoo for the middle area, I’m thinking of an JS animated slider, where each ‘slide’ is related to the sections below and each animation ends in where the next starts… to get some kind of looping animation. I’m not sure if I can pull that off but it would be a nice challenge.

    I’ll change the word Gravatar, thank you for your comments!

    @Jeager, thanks! I have seen semiflat designs before so thought that was okay. I can completely change the logo, that’s not a problem. Can make it an image too, and fix kerning in PS. I do like the idea of an icon but not sure what fits. Can’t change the name, it’s registered like this and I like it :P I knew from the start it would look less professional though.

    Can make some changes to header and footer and remove html bottom border, if I don’t go with the changes Chris proposed.

    I’m aware of the pixelation problems when hovering the 3 sections… I’m not sure how to fix that. It happens during the transition on the transform I use to make the icon a background. Thanks for pointing that out though :)

    @chrisburton, what’s your opinion on having a ‘vertical rhythm’? A lot of the choices on line-heights, and top and bottom paddings, borders and margins, came from having a vertical rhythm of 1.5em. That said I can reduce the line-height of the 3 sections, breaking the rhythm. Thanks for the screenshot with backgrounds removed. I like it, but there is no clear separation of the footer anymore. With a fat footer, won’t I need separation of content and footer? I liked my outdated stitches for that.

    Anyway, I wouldn’t mind more help from you Chris :)

    @AlenAbdula, they are just enlarged icons from the icomoon :P I’m working on polished versions, but I like them to be flat instead of too realistic. I don’t want another Apple product lineup, you can find plenty of those already.

    # April 17, 2013 at 6:56 am

    Cool! You did a great job! :)

    # April 17, 2013 at 7:49 am

    @CrocoDillon, as you build these graphics remember that your goal is to make sure potential client can envision his/her website in these devices. So if your target market is photographers/designers you might think about using apple looking products… it all depends. The fun of it is you get to make that decision :) .

    # April 17, 2013 at 8:52 am

    @ajnoguerra, thanks :)

    @AlenAbdula, that’s a fair point, something to think about, thanks!

    # April 17, 2013 at 8:57 am

    Nice and clean style website

    # April 18, 2013 at 2:17 am

    Cool. The logo looks unprofessional. I can do a professional logo for u.

    # April 18, 2013 at 5:17 am

    >The logo looks unprofessional. I can do a professional logo for u.

    Wow….just wow!

Viewing 15 posts - 16 through 30 (of 77 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".