I can't design for toffee .. looking for inspiration

I'm trying to redesign my site to be more business orientated, but I'm not a designer and I don't really know what to do.

What I have so far is this - http://af.brothercake.com/ - I like the main row of buttons very much, and I quite like the header for its minimalism; but I don't like the second level of buttons - I don't really know what to do with them.

Any kind artists feel like giving me some nudges for inspiration?

How many more buttons are you planning on for that row?

MNS

not sure ... I guess I'd wanna keep it to the same max-width as the top level, maybe take it over to two rows if necessary ..

Did you have an idea in mind?

Not right off. I wanted to know how much overall space you are looking at using and the number of buttons. I am "thinking" about it though. LOL kinda like "pooh" though...think,think,think

MNS

You might want to check out some of these peoples site for inspiration. Not all have sites but the ones that do are more exemplary of the kind of site I would like to have. Click on a name, pop-up opens with bio and link to a site if they have one. Some really cool stuff...imho

http://www.howconference.com/speakers.asp

MNS

oh well that's look interesting; thanks - and thanks for your consideration on this :)

First off, I must say I am a little dissapointed to see your af.brothercake.com site change bro. I can't say how many times I refered to your MORI site for help with CSS and semantics :).

Anyway, what about just doing a solid bar underneath your main link with a background color different then your body. Then in that row just have a list (<ul>) styled to be inline. You could do your own list marker, or just keep it as a bullet? I dunno...I think it would look nice!

Ohh, and make sure your shadow from your first row would still show!

I will try and think of more at a latter time. Right now I must prepare for some mini-golf...

Originally posted by pardicity3
First off, I must say I am a little dissapointed to see your af.brothercake.com site change bro. I can't say how many times I refered to your MORI site for help with CSS and semantics :).
Ooh sorry .. that's just a staging domain .. I didn't realise you were looking at it for reference ..

Once I develop this site it will be just as shining an example .. even more so ;) Dunno if you noticed but that two-level navigation bar already is list-based - the second rows are child-lists of the top row items. :D

With the name "brothercake" and a bio like this:About the webmaster

Strangely enough, I'm not really called brothercake. My name's James and I live in London, where I work as a web-developer for a research company. I maintain both the technical and business sides of this website, and do freelance work developing javascript components.

The name cake has been with me since 1994, in the days when I was a musician, and it was the name I used on recordings and live PAs. The brother part came later, soon before I launched this site, which was originally intended to promote my music.

But things change, and brothercake is now like an umbrella name for activities stemming from the site. The principal income from this venture is my Ultimate Dropdown Menu script, which also accounts for about three-quarters of the site's traffic.

If you're looking for someone to develop a javascript or dhtml application for your website, I could well be your man. I can design and build navigational systems, games, APIs, and other kinds of specific functionality. I can take on projects with audio components or a requirement for original music, and can offer editorial input if required.

I love dance music - I have done ever since I went to my first rave. It was Shouldn't be Allowed at the Cooltan; what a wicked place. It was a squatted ex-DSS office in Brixton and they used to run a community centre during the day, a cheap cafe and facilities for homeless people, arts and crafts and loads of cool stuff; then at night they used to hold all-night raves. Acid house, techno, breakbeat - I remember hearing tunes at that rave that have stayed with me ever since - cuts like House is a feeling, Higher State of Consciousness and Go. I couldn't believe this music - how large it was - how psychedelic.

You could come up with some really cool "vision" of what your site should look like.

Do you like the little yellow flower icon?

I like what you have so far on the second one except the "motto":

Brothercake
"your website looks like you could probably program a refridgerator to fly"

I'm still thinking. :rolleyes:

MNS

that's a quote from a client - it's going to be one of a number of different quotes in a random generator. Most of them aren't as silly as that though ..

the flower .. it's still my logo really, but I don't use it that much because I can't find a nice way of merging or combining it with the dark greeen and yellow colour scheme I've subsequently adopted ..

The crux is to be a bit more business like - I'm going to split off all the music and stuff into a separate, personal site which looks the same as my current site, and then use this new design for business, scripts and games archives. Be really nice to get the flower in there somewhere, but it is kinda kiddish :)

I love the layout! The thing that gets my attention is your nav bar. Totally unscripted!!! Very nice indeed :thumbsup:

I'm going to see if I can build a 3 level menu like that. That would be very useful for my site. It would probably be very complex, but I'd use that before using JavaScript. :D

Nice work! :cool: :thumbsup: ;)

Originally posted by brothercake
I'm trying to redesign my site to be more business orientated, but I'm not a designer and I don't really know what to do.

What I have so far is this - http://af.brothercake.com/ - I like the main row of buttons very much, and I quite like the header for its minimalism; but I don't like the second level of buttons - I don't really know what to do with them.

Any kind artists feel like giving me some nudges for inspiration?

This is where I go for inspiration

http://www.coolhomepages.com

I was just cruising the link I posted and the link spookster posted. I then attempted to validate the code on these sites that I went to. Not one validated. The closest I got to validation was 173 errors. Cool sites though.

MNS

imo a lot of them actually are tasteless...

Alright, let's get started:)

I know your big on the colors from your old site -- but I must stress that I would dig a darker green... that's a personal thing. I'd like contrast to step out a little more so that it pops when you view it. You may also think about introducing, instead, either a darker color or make the background white (which may or may not blow it out).

I like the green buttons and how they work -- the buttons underneath I would recommend to be horizontally aligned directly beneath the buttons side by side (closer to the nav bar). I would think your secondary buttons should be completely simple, so I really don't see any graphical change. I just think they need to be closer to the top bar and aligned tighter (maybe a whole bar underneath). They look plain because the main buttons don't have a lot of contrast color wise -- and it would be nice to see darker shadows (possible texture to the buttons themselves) or a little more font play... but, hey, most you guys don't like graphical buttons. Here's a good example: Nike Biz (http://www.nike.com/nikebiz/nikebiz.jhtml;bsessionid=A4R1ACYFDQPLSCQCGIUSF4YKAIZC2IZD?page=0)

The Header, though plain, needs something else. I do not like the gradient usage up top, because it seems forced and empty. I would strongly recommend either an extremely empty header with your title and logo as a cool graphic or a whole design up top that would utilize some more advanced photoshop skills. Dynamic photos of interaction would be good representing what you are attempting to do with your site. Photos will definately liven this all up.

As for the flower icon -- it can be worked in really cool. You need a photo that's more realistic though, with a stronger interaction. If you have some flower (photos) I can try to work it into a header?

Also, if you're trying to go more business and less personal; I would advise business colors more. Grey, white, blue -- yellow, red... stronger colors that represent more security and power.

I have some sample companies that have excellent designed business sites, shall I post samples for you?

I agree with brady on some points. The shadow on the top row of buttons does need and increase. Font play. A way of incorporating your flower icon into the header or some image to the right of the page title. There appears to be some kind of image in the bakground of the gradient to the left of the title. If so it should stand out a little more.

As far as the "business" colors, I know colors influence peoples thoughts to a degree, but I doubt that if they are looking for the skills you have that it would actually deter someone from picking you over another.

If that is the flower that is your "logo/icon" and the one you want, I think it could be used but it would have to be in a more "cartoonish" kind of way

I do not like the red border around the second row of buttons. I know you have the red in you page title quote but there must be another color that would work.

Darker green would be good, It is a soothing color and puts people at ease.

MNS

Wow - great feedback guys, thanks.

I don't like the red border either - that's just temporary. until I've thought of something to use for a "you are here" indicator, to remind me which element has it.

Making the nav darker green is a good idea, it would help with the overall contrast as well, and help make it look more powerful and businesslike, I guess - i wanted to avoid the usual grey blue and orange that sites like that have, because I like green and that's important to me, but i think a darker green will help a lot. nice one.

I'm not overkeen on image-based navbars despite how nice they look - I've just built a site (http://www.mori.com/marketdynamics_new) that uses them - they're very pretty and instantly professional looking, (although if you ask me the front page looks like bathroom tiling!)

But then I remember a big problem - they don't resize with text, unless you specify their dimensions in em, or build a page-zoom utility in JS (which would only work in win/ie), but then of course they look terrible because the type is rasterised. Shame there are no readily-useable vector formats .. I don't wanna use flash for something as important as navigation, because of its lack of proper accessibility, and also for ideological reasons if I'm completely honest; and SVG is just not sufficiently supported.

I do wanna keep the off-white background for accessibility reasons - for people who have dyslexia, black on off-white is easier to read than black on white.

I'm not so keen on that top gradient either - it creates a strange 3d aspect. I originally wanted a nice photographic header - like with crossfading images and stufff, but I'm stuck on what to use - pictures of computers and "WWW" and stuff is so obvious ... so I don't know .. I rather like beetle's page header (http://www.peterbailey.net), but obviously I don't just wanna do the same thing

It's difficult because I want that professional look, but I also want the aspect of cartoon-like graphics. Difficult balance to strike really ... it's that flower , which I don't have to include, but if I do it has to be as it is - a photo of a flower is not the same.

One idea I had was to make a very pale version of it and have it as a watermark, so it would suggest the branding without being overpowering, and means I won't have to change my favicon http://www.brothercake.com/logos/favicon.gif

I like the pale flower watermark idea. I found this on the Animation Factory's site:

that's cute - so kitsch :)

Good response, and I understand what you're looking at -- if you want to keep the 'cartoon' style of your Flower, would you adjust it a little? An idea (just a look example) is Bacardi's DJ (http://www.bacardidj.com) website.

Takes a while to download with all the flash, but once you get into the main section, check out the drawing of the girl to the right -- it is still cartoon, but has more depth and more pop. You could do something like this (mind you, not as airbrushed I would think) for inspiration? I can help you if you'd like.

I agree that the blue/grey is played out, and see your reasoning for the colors. The darker green would contrast well (though your site is murder for the color-blind).

Computer photos are bland, but you have other options. Dynamic shots of your town/country -- photos of open fields (to which would keep the theme of the flower -- you could have it behind the flower).

This website (http://www.pixeleye.net/index-extended.html) has a minimal flower theme.
I'll look for some others:)

Kitsch? Whoa! I had to look up that word :D


From an online dictionary:
1. artistic vulgarity: sentimentality, tastelessness, or ostentation in any of the arts. Example: The book jackets were pure kitsch.

2. vulgar objects: collectively, decorative items that are regarded as tasteless, sentimental, or ostentatious in style. Example: Tourist shops full of kitsch

[Early 20th century. From German, derived from kitschen to throw together (a work of art).]


Pretty cool word. I learn something everyday :cool:

that definition overstates the vulgarity imo .. kitsch is not necessarily vulgar, it can be very cute, but it's always sentimental and ostentatious :o

thanks bradyj - i like the idea of shots of my area and stuff .. hadn't thought of that kind of approach. but hey there's no colourblindness problem there - I know that yellow on green is usually bad, but providing the contrast is sufficient it's fine. I checked it out with Vischeck and it was okay.

But i can't change the flower .. it's a moment in time, when I drew that free hand, and they've all descended from that one. If I was gonna have a new logo I'd go for something else completely.

That Bacardi DJ thing is wicked .. I might have a go at that :)

That's pretty cool that you have an attraction to your past work. I see some people not even caring about their art. I was thinking too that the definition was wrong because you were praising the image, not insulting it. ;)

Yeah, that Bacardi site is crazy -- the designer is a Flash God among men... saw him at a Convention in Southern California and he can pop something together in no time... scary.

The logo has sentiment... then it's a great thing to have:) If you don't feel as though you can create a theme around the logo, put the logo where you want, and just build the site beneath it.

You could also make a theme that would have a distorted look (similiar to your drawing theme) -- not grundge, but more of a younger look. The page, itself, could look like coloring book (with little sections of empty space with color numbers) or just like a page and the layout could look like a crayon drawing... just brainstorming to help you out:)

Hey bcake

Well, you can maybe glean some good design inspiration from the CSS Zen Garden (www.csszengarden.com) (which is worth checking out anyways!).

Are you wanting to do a bit with imagery, or do as much as possible with CSS "art"?

Also, I'd suggest reading Doug Bowman's A Design Process Revealed (http://www.stopdesign.com/articles/process/). Basically, a look back on his experience/procedure in making Golden Mean (http://www.csszengarden.com/?cssfile=017/017.css). Very good reading. In case you don't know - this guy was a major person behind the Wired.com redesign a few months back.

Wow! Those are some awesome sites! :thumbsup:

I'm going to make my own version too. I was never aware that you could do things that great with CSS before :D

<?edit:msg reason="I'm an official CF Regular now! Yay for me! That Zen Garden place is also going in my sig:thumbsup:?>