Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

sjmdesigns

macrumors newbie
Original poster
Apr 25, 2013
2
0
Dallas, Texas
Howdy,

I'm pretty much self taught as a front-end web designer, so interested in what people think of our latest site. Please be nice, I'm a sensitive Artist :)

http://www.vollara.com
(my distributor site: http://www.myvollara.com/sjmdesigns)

5 people worked on this. Each person had a certain task to fulfill.

My task was concept/design, html and CSS development with JQuery/JS. I designed and structured the site, with my focus on the front-end development.

Tools: dreamweaver, expresso, and bbedit

Programing language is .net.

I usually don't have anyone to "learn from" so I get all my info from the net on HTML/CSS/JS.
 

designs216

macrumors 65816
Oct 26, 2009
1,046
21
Down the rabbit hole
Overall, it's a clean design with good use of color and white space that follows themes established by a strong brand mark. I'd say this is a solid start.

The footerbar is a little buggy and I question if taking the effort to hide all that info is worth it. It would be below the scroll line anyway and currently it may be just a little too hard to find. When I first open the page, there is only the merest of hints that the content is there in the first place. It's only when I've maximized it and minimized it again that it is obvious that there is more hidden content. I realize you're trying to continue in the theme of your navigation but give this further consideration.

I'm on the fence about the hatching in the main image. I wonder if there is a better way to further differentiate the first content row from second (small rectangles).

Why does the Support tab open a popup?

You're redundantly using title tags in the navigation. You're scoring the SEO value by using text in your navigation -- that's good -- but if there's no added communicative value or description for your visitor, I say skip the title tags here, it's distracting.

I like that you've established a strong grid but I think the overall design would be more interesting if more elements would be allowed to break outside the grid a bit. The green "LEARN MORE" buttons are the only elements that stray from the grid at the moment.

The type interacts with your imagery somewhat at the moment and I'd like to see that pushed a little more, along the lines of what you do when the second column temporarily appears in the first row. In this temp column we also see variation of line weights in the fonts (visually appealing) and also smooth edges of fonts that are images. I realize that you've used text fonts rather than images to maximize SEO and to make text easily editable but don't be so rigid in this thinking. What you may lose by using some images rather than type, you can regain by using Alt and Title tags. Overall, I'd like to see more variety in the font sizes and perhaps introduce a serif font to accompany the sans you have. Your goal is to visually define a hierarchy of importance to your visitor. They will naturally look at the top left of the screen first and find your logo there -- this is a given, but where do you want to lead them next and next?

Your scripting is orderly, well commented and easy to follow/edit. Kudos to you for learning so much of the left brain stuff that designers aren't usually encouraged to pursue. This will serve you well and make it easier to relate to hard-core programmers.
 

sjmdesigns

macrumors newbie
Original poster
Apr 25, 2013
2
0
Dallas, Texas
Overall, it's a clean design with good use of color and white space that follows themes established by a strong brand mark. I'd say this is a solid start.

The footerbar is a little buggy and I question if taking the effort to hide all that info is worth it. It would be below the scroll line anyway and currently it may be just a little too hard to find. When I first open the page, there is only the merest of hints that the content is there in the first place. It's only when I've maximized it and minimized it again that it is obvious that there is more hidden content. I realize you're trying to continue in the theme of your navigation but give this further consideration.

I'm on the fence about the hatching in the main image. I wonder if there is a better way to further differentiate the first content row from second (small rectangles).

Why does the Support tab open a popup?

You're redundantly using title tags in the navigation. You're scoring the SEO value by using text in your navigation -- that's good -- but if there's no added communicative value or description for your visitor, I say skip the title tags here, it's distracting.

I like that you've established a strong grid but I think the overall design would be more interesting if more elements would be allowed to break outside the grid a bit. The green "LEARN MORE" buttons are the only elements that stray from the grid at the moment.

The type interacts with your imagery somewhat at the moment and I'd like to see that pushed a little more, along the lines of what you do when the second column temporarily appears in the first row. In this temp column we also see variation of line weights in the fonts (visually appealing) and also smooth edges of fonts that are images. I realize that you've used text fonts rather than images to maximize SEO and to make text easily editable but don't be so rigid in this thinking. What you may lose by using some images rather than type, you can regain by using Alt and Title tags. Overall, I'd like to see more variety in the font sizes and perhaps introduce a serif font to accompany the sans you have. Your goal is to visually define a hierarchy of importance to your visitor. They will naturally look at the top left of the screen first and find your logo there -- this is a given, but where do you want to lead them next and next?

Your scripting is orderly, well commented and easy to follow/edit. Kudos to you for learning so much of the left brain stuff that designers aren't usually encouraged to pursue. This will serve you well and make it easier to relate to hard-core programmers.

-----

First off, thanks for your excellent comments on our web site.

Please let me address your questions...

Our pages are driven by a custom CMS we built along side designing this site. With that in mind, we thought making solid structures and placing these structures inside the database (DB) would be easier so when we create new pages in the CMS, it then writes/builds the pages based on the values we choose inside the CMS. Right now we have a Home template, and 2 Standard templates, one for regular pages and one for product pages. However, having ONLY 3 templates presents us not only with consistent looking pages, but other challenges as well, like (what you said) about some pages "standing outside the grid", and being a little different for variety.

The warranty page has NOT been addressed by our programmer yet. We want it in the CMS, but it's outside the CMS for now.

As for the footer bar, we wanted something to keep the social links in front of the user without cluttering up the header area, but yes, after seeing your comment about why even have it pop up to reveal redundant content, why have it pop up at all. I can remove the code to have it not pop up.

The reason why there's a heavy use of title tags on the site is that we've gotten a lot of complaints of handicapped users not being able to get around our site (Sight challenged people mostly). When we added title tags and proper alt tags, it seemed better for them. However, not sure about this. It's hard to get proper feedback sometimes.

Your comments regarding using html type versus image type... We are planing multiple language sites and thought that html type would be easier, so (almost) all of our type is html type based. Yes, we will have to do some image swapping, but right now there's little of that to do.

Ahhh, the green learn more buttons. Well, we had a reason for that. Our reason is basic. What does a monkey want? Well, we came up with our answer. A banana. So, we wanted our pages to have a banana. The most important link on the page is the banana. The blue and grey button links are secondary links, but the green button links are the most important item (aside from the main visuals and main content).

Thanks so much for your comments, you've given me a lot to think about.
 
Last edited:
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.