Fellow Campers,
I think this is the right category thread to post this in; I’d appreciate any constructive criticism. Framework is Bootstrap, so it is mobile responsive.
Thanks in advance for taking a look ~
Auvenell
@Auvenell, that’s a lot of hard work!
A few thoughts -
In the image showcase, it might help if you can reduce the size of the image a bit such that each image can be seen without scrolling.
In general, the icons for social media appear too big. On small screen, they continue to stay that big.
The text after “Contact Info” heading isn’t easily readable due to the background. Perhaps, some other closer to white might help.
Hope this helps. Thanks.
It really does; thank you! I just checked out that section of the page on my smartphone, you’re absolutely right.
In regards to the image showcase, is there any way to resize the images without resizing the original photos?
Thanks for sharing @Auvenell. It’s certainly a very striking design! There are places where it maybe too visually overpowering. For example, the background image has a lot of contrast in it, which make it hard to read the text on top sometimes:
Also, places where there are high-saturation colours can be tiring on the eyes.
Contrast is a good thing to use, but consider contrasting not just colour, but tone, saturation, contrast, lightness, etc.
Also, there’s a lot of stuff competing for my attention on the page. The ‘subscribe for info’ section, the contact section, the image gallery. Try thinking about information hierarchy. What’s the most important thing you want your visitors to see? If they only look at your page for 5 seconds, what do you want them to learn about you, or what do you want them to do?
Finally, the headings that expand when you hover is very jumpy and a little disorienting. You might want to add some [easing] (http://easings.net/) to the animation to make it less jarring.
To add to @stewartmurrie comment regarding contrast and color, a great tool you may want to put into your back pocket is Adobe’s Color CC web application. You can identify and pick out a complimentary color palette prior to you coding your site. Or you could use a site like ColourLovers with pre-made color palettes (Adobe Color CC now seems to offer user-generated color palettes located on the ‘Explore’ tab).
Color Theory is something you’ll want to study up on as you move further into your front-end development career (if that’s the path you’re going).
I would highly suggest Google’s Guidelines on Material Design. It’s a really great guideline for visualization and the psychology behind how we emotionally connect with color and typography.
Another wonderful, platform-agnostic (for all forms of art) design study is the book Universal Principles of Design
Yep, great advice @christophercodin. I would also add my recommendation to read [The Non-Designer’s Design Book] (http://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151) by Robin Williams (Peachpit Press, 2014). It’s a great handbook for teaching elementary design (layout, colours, typography). It’s not web specific, but the ideas are the same in all media.
@Auvenell, you can use css to resiE images on the page - http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent
Thanks pradxj07,
@stewartmurrie @christophercodin
I know this is really late; I actually never ended up checking this thread out again since I got busy with school. But the feedback here is excellent! I really appreciate the time you guys took out to look through the entire page.
Thanks again!