1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Other Restaurant website design

Discussion in 'Photography, Art & Design' started by will., 10 Sep 2009.

  1. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    Hey creative people types,
    I just completed this design for a freelance client. I'm pretty happy with it, which is a first :p

    I need to sort out some spacing and typography issues that I was too tired to spot last night and find some more random ornaments to cut out for those shelves at the bottom, but other than that I think this is going to be the final design. (Apart from my usual tweaks while I'm building it at least...)

    [​IMG]

    Opinions?
     
  2. julianmartin

    julianmartin resident cyborg.

    Joined:
    25 Jul 2004
    Posts:
    3,562
    Likes Received:
    126
    I like it - not sure if I dig the big red "find out more" button but thats just minor opinions. Overall very good though!
     
  3. Krikkit

    Krikkit All glory to the hypnotoad! Super Moderator

    Joined:
    21 Jan 2003
    Posts:
    23,925
    Likes Received:
    655
    Very nice, I think the red suits it too, it breaks up the colour scheme and draws attention to the interesting bits you want folk to look at. :)
     
  4. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    My intentions exactly :)

    Cheers :D
     
  5. -equilerex-

    -equilerex- What's a Dremel?

    Joined:
    3 Nov 2006
    Posts:
    206
    Likes Received:
    2
    looks pretty damn great, you going to code it yourself or just doing the design?
     
  6. Cookie Monster

    Cookie Monster Multimodder

    Joined:
    27 Aug 2003
    Posts:
    4,511
    Likes Received:
    643
    Totally agree, I'm busy making a new page myself, how have you included your background? Is it one large pic set within the body or is there a column either side with a pic in each?

    Cheers for the help, sorry to throw the thread off topic.
     
  7. Cabe6403

    Cabe6403 Supreme Commander

    Joined:
    3 Apr 2007
    Posts:
    1,205
    Likes Received:
    44
    Looks fantastic, very well done :)

    I like the red, its a Christmas-ey red.

    I'm curious, what do you use to design websites?
     
  8. supermonkey

    supermonkey Deal with it

    Joined:
    14 Apr 2004
    Posts:
    4,955
    Likes Received:
    202
    I'm curious to learn a little bit about the design process as well. Your design is very swanky - I immediately get the feel for what kind of restaurant this is. Is this a mock-up which is then hand-coded in another program, or do you use Photoshop's built-in web design utilities (assuming, of course, that you're even using Photoshop to begin with)?

    I'm curious to know how you build the pages (specifically, the images within the pages). Is this mostly stock art that you cut up and manipulate?

    -monkey
     
  9. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    This one I'm doing freelance from start to finish.

    At work though I'm designer, CSS, HTML and Javascripter, and then Flash Animator. We've got a couple of developers who do the clever behind the scenes stuff.

    Photoshop all the way.

    In terms of hardware, at work, 2x22inch samsung LCD's, a rubbish computer, a wacom tablet and my trusty mouse + keyboard.

    At home I use my 13.5" macbook (unibody one). I've now got a 24 inch dell hooked upto it, but I actually designed that site all on the mac with trackpad... Horrible way to do things!

    Firstly I sketch things out on paper. I only recently started doing that, and it really does help you keep the eye on the prize, so to speak.

    Then I kind of prototype it in photoshop. Basic block shapes, text and the logo. Basic colours as well. This is mainly for layout. I used to get stuck in a routine where I'd just sit for hours and design the navigation of the website, which is important, but the content is king, and I'd often ignore it and then in a rush, lay the rest of the site out as an afterthought.

    With my layout pretty solid, I then start adding the fancy bits. Textures, logos, colours. Choosing fonts and other typography stuff like font size, line heights and the right amount of whitespace. (Which I'm still tweaking in this case actually... It's still not sitting quite right in my eyes...)

    In this instance, the textures come from all over. Partly just done with default brushes, and I think I got a sandpaper texture from somewhere. The wooden bar came from sxc.hu I think. The big header imagery came from iStockPhoto. Those vector leaves either side of the content are also iStockPhoto, which reminds me, I need to buy them still. I'm just using the comp at the moment :p

    The other images on the page are mostly google images. Those events are made up, and I don't fancy paying for stock I'm not going to use.

    The shelves (which looked terrible until I accidentally screwed with their levels just before I was about to delete them) actually started out as this: Linky and were butchered into the end result. I wasn't going to recess them into the page at first, but I think they look better this way.

    That blackboard is just a shape with a bit of grunge masked over the top. Same with the paper with the address on.

    From this point (aside from a few tweaks the client has asked for) I'll be doing a LOT of slicing. I don't like using photoshops slice tool though, it's too complicated. I just lay down guides and copy+paste. Anything that can repeat without looking **** becomes a tile. Anything that can't becomes a simple image.

    I then lay out the HTML, and CSS by hand (with coda on mac, and dreamweaver's code view (auto complete is pretty much the only reason for dreamweavers existence!) on PC). Javascript for the bouncy, and then a teeny bit of flash to make those champagne glasses bubble a bit.

    From there, I usually hand over to the developer geeks, but this time, I'm going to try my hand at PHP... I anticipate failure though, so a guy from work is going to do it for me I would imagine. :p

    Oh, an by the way, nice red button is now Aubergine at clients request. Looks pretty good actually.
     
    supermonkey likes this.
  10. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    If anyone is interested, this is where I started:

    [​IMG]

    You can see it didn't come out quite as I originally planned, but pretty close.

    Oh, and Ikea pencils Cheesecake!
    I went to ikea a year ago, and I still must have about 50 pencils left! :p
     
    OleJ likes this.
  11. Cabe6403

    Cabe6403 Supreme Commander

    Joined:
    3 Apr 2007
    Posts:
    1,205
    Likes Received:
    44
    It's a very impressive result. I've been using photoshop for years but I'm just starting to get into the whole designing stuff.

    I can mock up a site in photoshop but I find it hard to code them. I like your idea of copy/paste the slices, I shall have to try that :)

    I can't afford iStockPhoto so I either use sxc.hu or my own photo's.

    The last thing I designed was this:
    [​IMG]
    As an A6 flyer (it has a back too but icba uploading it because I'm on a different computer atm.

    I use the setup in my sig.

    Anyway, I'm very impressed with your work :thumb: keep it up
     
  12. DarkLord7854

    DarkLord7854 What's a Dremel?

    Joined:
    22 Jun 2005
    Posts:
    4,643
    Likes Received:
    121
    Love the design however I see a possible problem for IE6 (if you do cross-browser compatibility) with the way the hover effect for the menus work, I'm going to assume for the other items, it'll go under the logo, which requires a transparent PNG, and IE6 doesn't like that, lest you get a JS PNG fix obviously..

    Either way, looks great, though it fades out quite a bit near the bottom.
     
  13. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    Yea, the footer was rushed a bit. I'm going to finish that off while I'm building it.

    Cross browser compatibility of course. Although if Ie6 doesn't look quite right and it takes more effort than it's worth, I just ignore it now. Anyone still using ie6 won't notice the effort anyway, or they would have upgraded :p

    The navigation won't be an issue anyway I don't think. I'll just use a .gif for the logo and set the matte somewhere between the two colours. The text is crisp lines, so it shouldn't be noticeable.
     
    Cabe6403 likes this.
  14. supermonkey

    supermonkey Deal with it

    Joined:
    14 Apr 2004
    Posts:
    4,955
    Likes Received:
    202
    +rep for the workflow explanation. That helps me a lot. One of my coworkers owns a small local business, and he's asked me to help redesign his web page. I've never really used Photoshop for the design work, so I may give it a go. I usually end up working through the design using Dreamweaver (code view for the auto-complete ;)) and a lot of browser refreshing. It ends up taking forever to get anything done, and my pages end up fairly blocky.

    -monkey
     
  15. Cookie Monster

    Cookie Monster Multimodder

    Joined:
    27 Aug 2003
    Posts:
    4,511
    Likes Received:
    643
    Will, where do you get your images from? I need a pic of a bride sitting at a table which either has wedding cards on it or card/paper/ect.

    Tried iStock, Getty images, going to go to google now but I doubt i'll find one in a good resolution.
     
  16. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    iStock is usually my final port of call really, www.scx.hu is very limited, flickr sometimes provides some good stuff, but the licence is often too restrictive.

    If you can't find the exact image you want, you'll need to find a bride sitting down, a table and some cards and photoshop away! :p
     
  17. Cookie Monster

    Cookie Monster Multimodder

    Joined:
    27 Aug 2003
    Posts:
    4,511
    Likes Received:
    643

    thats where the problems start :D
     
  18. OleJ

    OleJ Me!

    Joined:
    1 Jul 2007
    Posts:
    2,024
    Likes Received:
    10
    Wow... Thanks for sharing the sketch. It's good to know that an amazing result doesn't require picture perfect sketching. Mine look pretty much the same btw.
    I "always" sketch my stuff too in pretty much the same way as it as you say helps you keep your eyes on the prize.
    I also find it very useful when discussing design plans with the customer as it gives a common reference and a firm idea of where things are supposed to be but the end result can grow very much visually without the design being tied down by the sketch.

    :clap: I'll have to give you rep for that :D

    Oh and feedback:
    It looks really great. No discussing that.
    Only thing I can put my finger on right away is I don't think the type on the menu looks quite right. It either needs more letter spacing or not be all caps. The narrow font looks nice elsewhere but I'm not too fond of it in all caps.
    As mentioned in another post above the bottom part fades a bit... Perhaps use a thin streak of the red somewhere in the finish of it? Also the negative space below the ornament boxes looks slightly out of place... But this is such little detail that I'd rather see a larger screenshot before I can truly decide.
    It's yet another inspiring and beautiful site you've posted and I think you're right be proud of it :)
     
    Last edited: 13 Sep 2009

Share This Page