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: https://www.lisasandlerphotography.com

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? https://www.bigwhiteduck.com

@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:

thanks!


(Pete Schuder) #2

Have you looked at this: http://defligra.com/grid-stacks/gogrid-stack/

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 doobox.co.uk.

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.


(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:
https://www.lisasandlerphotography.com
https://www.lisasandlerphotography.com/details/
https://www.lisasandlerphotography.com/details/about-lisa/

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!


(Lisa Sandler) #20

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


(Konstantijn Van Calster) #21

@LSPhoto
Hi Lisa,

Start to look much better now but take me a while to load your photos.
Have you compress all your photos? -suppose yes as a professional photographer.
Thinking of Warehousing?

How are you doing now without RapidCardPro?

Regards


(Lisa Sandler) #22

All warehoused and used Squash. Just republished so maybe that’s why.

I quit Rapidcart Pro. Never heard back.