Grow your CSS skills. Land your dream job.

Feel out of my comfort zone…

  • # June 7, 2013 at 10:11 am

    Hey guys

    A friend of mine who is a Pianist wants me to create a website for him, he has given me a few examples of what he has in mind, in particular he is fond of this [website](http://www.jamesrhodes.tv/ “”).

    The website to me looks cool, and I would love to be able to recreate something similar, but I have NEVER took on a project like this.

    Anyway, I have started on the project and I have ended up [with this](http://i.imgur.com/tMBofjw.png?1 “”) so far…

    Every time I progress with it, I feel like I need to scrap it and start again, [the websites I create](http://stevenwatson.co.uk/portfolio “”) are very simple and minimilistic, nowhere near as graphically based like the other one.

    I feel out of my depth and I kinda’ feel crappy that I am struggling with this…has any one ever took on a project like this? Any advice I need specifically?

    # June 7, 2013 at 10:26 am

    Frankly the example site you linked looks very busy to me and very last decade.

    I would be looking to reduce the clutter as well and I think with a few more touches what you have already created is more in keeping with current..ahem..trends.

    I’m not fan of the background you have there (wood?)..something a lot darker with an image related to his profession would feel better to me. Perhaps music notes or a piano?

    Image ideas:

    http://static.tumblr.com/lr23dox/9emm9ham9/logo_no_words.png

    http://www.cafelaguardia.com/images/music_notes-53121910.jpg

    # June 7, 2013 at 10:29 am

    Break it in to chunks, don’t think of it as developing a page, but developing modules for the page.

    For example you could think of it like this (going off your design)

    * I need a container,

    * I need a header,
    * I need a logo section,
    * I need a nav section.

    For the main content I need

    * a blog section on the left,
    * a sidebar,
    * the blog section needs a title
    * each post needs 3 sections, title, content, read more

    On the sidebar I need

    * a title
    * 3 sections for links
    * a section for “my videos”

    You mark all this up before you start styling anything.

    Then start thinking about things that will use the same styles

    * titles
    * sidebar links
    * etc.

    Essentially, break the site down. It is easier to work on smaller things towards a final product than it is to work on the grand scheme.

    as Paulie_D says, try to de-clutter it as much as possible. But if you break it down in to chunks as I suggested, you may find it less intimidating.

    # June 7, 2013 at 10:32 am

    >Essentially, break the site down. It is easier to work on smaller things towards a final product than it is to work on the grand scheme.

    I don’t agree. He’s not developing a page…he’s designing a site **look**.

    You have to have an overall design in mind first. An actual **look** and that’s what is being designed here as can be seen that it’s a photoshop design.

    Once you have the design…you get to work with the HTML/CSS.

    # June 7, 2013 at 10:41 am

    > You have to have an overall design in mind first. An actual look and that’s what is being designed here as can be seen that it’s a photoshop design.

    Oh I agree, the design and idea of the site’s design and look should be well thought out beforehand. It was my understanding that the issue was actually tackling putting together the site after designing it.

    I may be wrong in my understanding of what he said, but I totally agree about having the design in mind before tacking the html/css. I just meant once you have the design, mark it up in HTML before you tackle the css, and then work in chunks.

    I was probably not clear enough in my post about having the design before marking it up.

    # June 7, 2013 at 10:48 am

    From the OP I got the impression that he wasn’t happy with his design and this was asking for a critique before actually building it out.

    Personally, I prefer a more minimalistic look to the example link which, as I said felt dated to me.

    I confess I prefer darker websites to brighter ones but for an artist such as a pianist (the client) I would think that something “moody” (something to draw me in) would be more effective than a bright page such as Mr Watson has now.

    My 2c anyway! :)

    # June 7, 2013 at 10:56 am

    @Paulie_D is correct, I am basically looking for critique as I don’t feel it’s anywhere near the way my friend wants it if he is comparing to the example site.

    I honestly prefer clean designs also with soft greys and simple highlights but the website he likes isn’t kind of what I usually create so it feels rather…odd.

    I think I will play around with the background and see how a darker pattern will look.

    # June 7, 2013 at 11:09 am

    I struggle with this issue myself often — creating/designing something, and then after a while you’re so “used” to it, that it doesn’t look fresh anymore and BAM I start over.

    To me, that is the clear indication that design is so much different from development. When I develop a site for someone who came up with the design, I just do it without worrying about the design itself. When I develop a site and I’m also working on the design, I worry too often that it’s not creative enough. Or clear enough. Or flashy enough. Or clean enough. Or ______ enough (you fill it in). But I do think it’s just the result of staring at it for so long all the time.

    # June 7, 2013 at 11:09 am

    Oops, my misunderstanding.

    # June 7, 2013 at 12:49 pm

    @Watson90 how long did you talk to your friend about the sample sites he gave you? When ever I design a site, and someone gives me examples to follow, I’ve learned to get good at asking a lot of questions to figure out what EXACTLY about the examples they provide do they like.

    Asking questions like, “Tell me about what draws you to this site. What about the navigation? Does it feel clean? Does this site appear cluttered? Ok, if it feels cluttered, what is still ‘doing it’ for you?” ETC and you just figure out what types of elements they like.

    Usually what ends up happening is I end up with a list of “must haves” that I can incorporate into any design. Otherwise, I feel like the result is forced because you’re figuring out how to replicate this look and feel that you don’t normally design or even necessarily like.

    # June 7, 2013 at 1:37 pm

    Yep, agree with above comment.

    But you also sound like you’re being very limiting in either what you believe you can do, or what you’re aiming to do. Unless you’re an “artist”, your “style” should be guided by the client, their brand, target audience, preferences …etc, not by your own personal tastes. This is a friend’s site, you should take it as an opportunity to design something that is for the client, not for you or your portfolio. I’m always wary of “designers” who create sites all of a similar style.

    # June 7, 2013 at 2:43 pm

    I think your example site has way too much going on. The design you have started is better in my opinion. If you’re wanting to emulate some the example sites look/feel, do so in small, subtle steps to avoid the cluttered mess shown in the example.

    # June 7, 2013 at 4:25 pm

    Thanks very much to everyone who has commented so far, I should really see this as an opportunity to design something different and unique, I will be meeting up with him soon enough to discuss the design further to find out what exactly he wants.

    I think the main thing he wanted after looking at the example site, is the interactivity more so than the design, I have added a disc to my design that when hovered over, it will look like it has spun a few degrees etc.

    I will keep working on it :) thanks again…

    # June 7, 2013 at 4:54 pm

    I actually feel he might be wanting something with a little more texture than the common clean/minimalist sites that every second site seems to be nowadays. The example site he gave may not be the best example, a little too busy, but there are many other examples that show some great design styles and are still easy to use.

    Eg:
    http://www.hollisterco.com
    http://www.theiheartfilm.com
    http://www.shawnjohnston.ca
    http://littlehellos.com

    As you commented, I think this is a great opportunity to create something new, and expand your abilities as a designer. It’s also good to not always follow the crowd. ;)

    # June 7, 2013 at 5:40 pm

    @deeve007 What I understood from that, including some horrible examples you gave, is going back into the “texture” trend that we’ve seen for, at least, the past 4 to 5 years. The only one that makes sense is Hollister. It’s a part of their brand.

Viewing 15 posts - 1 through 15 (of 32 total)

You must be logged in to reply to this topic.

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