Layout Advice Please!


(Lisa Sandler) #1

Too many choices! As a print designer, I have such a hard time figuring out my layout. I’d love some advice/opinions.

I have a lot of similar pages like my home page… boxes of photos with text and links… Most do not line up vertically, as they have a different amount of text:

Do you think I should use the panels to distinguish different areas (as the home page) or should I separate out by a divider line and then box each separate photo and text inside a box that has a background color? Like this?

@joeworkman @tav @teefers @willwood @1611mac @SteveB @kryten @NeilUK @jabostick @swilliam and anyone else who has an opinion? It would only let me tag 10 people… don’t be offended if I didn’t tag you :wink:


(Pete Schuder) #2

Have you looked at this:

I just got a fresh update that does some nice things, especially lining up images. His support is outstanding.

(Lisa Sandler) #3

I think you misunderstood. I have everything I need. Just asking for design advice.

(scott williams) #4

I’m a big fan of color “panels” as a way to seperate sections like Andrew’s but I tend to use more contrast between background shades/colors for a more distinct separation.

That may or may not work when it comes to showcasing photographs.

for example

(Lisa Sandler) #5

I might be able to take a couple of things from it, thanks. The blue lower down hurts my eyes, though :wink:

(Jonathan Spencer) #6

I know what you mean, it can be difficult especially when sites have grown organically.

I have bought this set of partials, it gives a nice modern block effect and being partials can be reused and adapted easily.

The blue hurt my eyes as well!

(NeilUK) #7

Hi @LSPhoto,

I don’t think there’s anything “wrong” with the way your site looks. However, we all have different tastes regarding colours, layout etc.

I always fret when things don’t align vertically, but looking at your site, it doesn’t stick out.

Big White Duck is one of my favourite RW sites. the layout and colours are perfect to my eye. I’m not saying copy it, but you won’t go far wrong with something similar. I too am a big fan of “panels”. Another site I really like is

One thing I will mention about your site is the pop up email subscription form. It appears to be stuck to the bottom of my screen with some of it cut off.

(steve bee) #8

Morning Lisa.

OK, you did ask… And I’m no designer… But… And this is just my “way” of doing things, not the right way…

I’m on a 13in laptop, and the content is edge to edge, which I always feel makes it look crammed in, so I’d restrict overall site width to 1000-1100 px. 1200 at a push.

I don’t think your fonts work. One is very old style, the other modern. I would keep the text font and change the header to something a bit bolder, less fussy and more modern.

The subscribe box needs to be far narrower, say 600-800px and at the bottom.

The three column text area needs breaking up, too much in one section. Split it into three centre aligned segments and place between the image sections, or reduce it to two columns and keep it at the top, but reduce the width of the individual text columns to about 400px (so 2x400) with a good size gutter between them.

The text is a bit wordy too.Take out the superfluous words and you’ll be surprised that it still works but takes up half the character count.

Lose the red border on the slide.

Increase the font size in the menu.

I’m guessing by now you’ve already added in the panel background colour? Grey? Change it to the same as the header colour, and change the panel sections slightly by change the opascity, 40%, 50%, etc. Start at the top and have each panel 10% darker than the one above.

Lose all the RW credits in the bottom. They’re pointless and will just confuse the visitors. I’m all for giving credit to devs, but not your website real estate.

Final comment, before you never talk to me again… Re-do your logo. Sorry, but it looks like that of a real estate agents to me! Go for something more modern feeling.

Sorry to sound so critical. Remember, I’m not a designer. My real job is fixing bikes!

(Gary) #9

@LSPhoto A good design technique I find really useful, is to look at a page such as the home page, and remove absolutely everything you don’t need. E.g. Your Photo Gallery Section has lists under each one which don’t add anything and over complicate the look, and you have a list of RapidWeaver stacks and developers at the bottom. You have to decide who the site is aimed at and stick with it.

Layout wise consider adding 10 or 12% “white” space at the top and bottom of each section using SectionsPro. Using SectionsMaster you can adjust them all at once and by trial and error get it looking right. I would say you have too many colours going on so perhaps simplify that too. I think you should remove the Graphic Design bit to a separate page unless it’s a core part of your focus.

Then keep going back over it removing stuff and you will end up with a better design that clients will find more appealing, be more relevant to what your business is about and easier to understand and navigate.

You already have a design, but a good way to decide on the content is to imagine you are giving a presentation to a bored audience and you have 30 seconds and only 5 slides. Work out what you would put on those 5 slides and only use that information in your home page. Make sure your audience knows exactly what you do and what you don’t do. I get the impression from your home page that you do every type of photography and also do every type of graphic design. As a potential customer I would probably think you don’t specialise in any one area and also do graphic design when not busy enough taking photos. It’s all about the illusion we need to create.

As web site builders we can often get so caught up in the search for a technical solution to a web building problem, that we lose sight of what we are trying to do in the first place. As new stacks and frameworks come to the market, we also try to incorporate those new things or see other sites with exciting ideas and try to use those too. Good design is about filtering out all of that and focusing on what your business needs to succeed.

(scott williams) #10

Thanks for your opinion Lisa, sorry for the retina damage :sunglasses:.

It may very well turn out that the blue changes, We will be split testing these pages for click through and color is one of the first things that will be tested.

I will clarify somewhat the concept. In general people don’t read web sites, they just quickly skim headlines and images.

That particular page has a fair amount of text so the Idea is to grab their attention again (both those that are quickly scrolling buy and also those few who are now half asleep from reading all of that text). It’s kind of a slap that says “wake up, here is what you are after” and a call to action.

This method, as well as areas with larger sized text works very well for highlighting information and stopping skimmers as they scroll by at 90mph on their touch devices.

I tend to like this method better than making long pages by breaking up the text areas and putting in several call to action buttons.

(Jason Bostick) #11

I would tend to agree with much of @webdeer’s comments. I think, for the homepage in particular, you could do some paring down and make it a gateway to the rest of your site, and lets those specific, internal pages get into the nitty gritty detail.

I’d agree that, while the list of rapidweaver stacks may be of interest to us, it isn’t to your customers (not enough to be on your footer anyway). If you wanted to include your personal interest in web design as part of your About Us, then maybe it would fit there but, other than being a nice nod to the Dev’s, it probably distracts/confuses more than it helps.

As for the general layout ideas - I tend to like panels. Partly because it helps focus your customer, partly because it encourages padding of content (I’m usually guilty of under-padding things). Obviously, being a photographer, letting your imagery shine is a good idea but, again, do as Gary says and be minimal when you can.

(Lisa Sandler) #12

The blue reminds me of the old RGB days. I’d just choose one that looks less 80s computer :slight_smile: The blue in the banner would be fine :slight_smile: and thanks again, I do see some things that I can borrow from :slight_smile:

(Lisa Sandler) #13

I don’t hate you :slight_smile: and I will talk to you again! All comments welcome and I will take away what I will. Lots of great advice :slight_smile:

It is currently 1200. I will try 1000. and the newsletter pop up is only 500px wide… I’m still playing around with Sections Pro. OK, I’ll lose the RW credits. Increasing font size on menu is a good idea. I am trying new fonts, so I’ll take that under consideration. I’ll get rid of some of the extra text on the home page.

thank you, this is helpful.

(Lisa Sandler) #14

Interesting as I was starting to make my own Partials just like this… good reference, thanks

(Lisa Sandler) #15

I fret when things don’t line up vertically as well lol. Glad to hear it’s not so bad.

I’m new to Big White Duck and Foundation, as of a week ago. So many choices, so that is why I’m asking the expert web devs. I’m a designer, but get lost in the web aspect of it sometimes.

I just changed the setting on the newsletter form… I wanted it to come lower, but I’ll recheck that.

thanks :slight_smile:

(Lisa Sandler) #16

Thanks for this. I see now that I can get rid of some of the extra text. I was led to believe the home page should be sort of a “kitchen sink” or throw it all in there. Good to know I can slim it down. and add more white space as well. I have a print brain, which we cram everything in we can in the space allotted.

I’m learning Sections Pro… just got it yesterday, so will start to add space. That’s why I wanted feedback on the home page. Once I set the styles, everything else will follow.

thanks again!

(Lisa Sandler) #17

Thanks, All good advice, much appreciated. Gives me some direction and verification to do what I need to… more white space, less text.

(Lisa Sandler) #18

I wanted to let you know all your advice was a great help. I’m slowly revising my site, but here are a few pages I’ve updated:

I still have a ways to go and need to cut down on text, but it’s a good start.

Make sure you clear your cache or refresh pages if you’ve already looked.

thanks all!

(steve bee) #19

Putting an image on one side, and text on the other, in a two column layout, creates a lot of headaches as the screen size changes.

For instance, put the page into Inspect mode and select iPad. You’ll immideiately see the problem.

(Lisa Sandler) #20

works fine on my iPad and I set separate sizes for iPhone.