Seeking web design advice
March 6, 2019 10:23 AM Subscribe
I'm still learning about design and would love some advice about making my personal site look slick, clean, modern, and generally appealing on both big screens and small.
I'm doing an overhaul of our travel blog, mostly replacing and fixing the backend but also updating how it looks. It was last updated in 2014. It's just a site aimed at family and friends, not monetization or anything like that.
The site is The Slow Road.
I'm doing an overhaul of our travel blog, mostly replacing and fixing the backend but also updating how it looks. It was last updated in 2014. It's just a site aimed at family and friends, not monetization or anything like that.
The site is The Slow Road.
Your photos are amazing so that makes me think that you should go for a photography-centric layout. The easiest route here would be to pick a pre-made Wordpress theme that's already optimized for all size devices. You can search for "Wordpress themes for photographers" or if you don't want to go with Wordpress for some reason you can just search for "responsive masonry layout" or "masonry css framework" and see what you like (if you don't what masonry is, here is an example). FYI you can host your blog on Wordpress.com, all inclusive for $100/year (includes lots of free photography themes, contact form, password-protected pages, and much more).
posted by rada at 10:40 AM on March 6, 2019
posted by rada at 10:40 AM on March 6, 2019
Response by poster: I know about the content errors and other internal problems. Those will be fixed.
The site is Wordpress, with a good host. Part of the point of this is to improve my own web development skills, although I may choose a template to begin.
But the point of this question is more looking for specific design advice (like the white space suggestion). I wan to know what changes would make this design look "better".
posted by mkuhnell at 10:48 AM on March 6, 2019
The site is Wordpress, with a good host. Part of the point of this is to improve my own web development skills, although I may choose a template to begin.
But the point of this question is more looking for specific design advice (like the white space suggestion). I wan to know what changes would make this design look "better".
posted by mkuhnell at 10:48 AM on March 6, 2019
Response by poster: Looking for more of a critique of this design (visual, not developmental).
posted by mkuhnell at 10:51 AM on March 6, 2019
posted by mkuhnell at 10:51 AM on March 6, 2019
on my Android phone, the blog item text snippets on the front page are centered, which should not be done there. you could shrink the title font a bit, too, both on the index page and for the template of the post page..
posted by rhizome at 11:19 AM on March 6, 2019 [1 favorite]
posted by rhizome at 11:19 AM on March 6, 2019 [1 favorite]
First thought: Wow, this looks really Wordpress-y.
Make the top photo full-bleed (a hero image).
Pick one image and make that the header. No reason to carousel it. One of the designers I work with always sends this to clients who request a carousel image. If you don't want the same image all the time, change it randomly on page load. If you don't know JS, there are plenty of how-tos where you can just copy and paste the code, changing the URLs of the images.
Not a huge fan of your typography. Everyone loves Helvetica, but I don't really think it's appropriate here. It connotes more of an icy, business-oriented, no-frills kind of vibe, but your photography is the exact opposite. You want fun and carefree. It's OK to leave your body text in Helvetica, but for headlines, use something with a little more pop. I also think you should probably use a stronger weight. Your titles look too insignificant now. Also, Impact never looks good. The only time it should ever be used is in memes.
I don't think you need to add much more whitespace. What you need is less gray space. Change the background color from #E3E3E3 to #FFFFFF and see how much better it looks. Likewise, if you make your top image a hero instead of having the #2F2F2F background, it looks much better.
I do like the orangey-red color. It works with what you're trying to do. Play that up more. You can use 0 to 255 to find other shades.
One thing I like, that might not be super popular, is to frame images. Give your images 1px borders with 1px of padding. I think it helps set them off from the background a little, and especially with high-quality photography like yours, I think the framing gives it more of a "this item is on display"quality.
posted by kevinbelt at 11:42 AM on March 6, 2019 [2 favorites]
Make the top photo full-bleed (a hero image).
Pick one image and make that the header. No reason to carousel it. One of the designers I work with always sends this to clients who request a carousel image. If you don't want the same image all the time, change it randomly on page load. If you don't know JS, there are plenty of how-tos where you can just copy and paste the code, changing the URLs of the images.
Not a huge fan of your typography. Everyone loves Helvetica, but I don't really think it's appropriate here. It connotes more of an icy, business-oriented, no-frills kind of vibe, but your photography is the exact opposite. You want fun and carefree. It's OK to leave your body text in Helvetica, but for headlines, use something with a little more pop. I also think you should probably use a stronger weight. Your titles look too insignificant now. Also, Impact never looks good. The only time it should ever be used is in memes.
I don't think you need to add much more whitespace. What you need is less gray space. Change the background color from #E3E3E3 to #FFFFFF and see how much better it looks. Likewise, if you make your top image a hero instead of having the #2F2F2F background, it looks much better.
I do like the orangey-red color. It works with what you're trying to do. Play that up more. You can use 0 to 255 to find other shades.
One thing I like, that might not be super popular, is to frame images. Give your images 1px borders with 1px of padding. I think it helps set them off from the background a little, and especially with high-quality photography like yours, I think the framing gives it more of a "this item is on display"quality.
posted by kevinbelt at 11:42 AM on March 6, 2019 [2 favorites]
To add onto the above advice about fonts and images, which I agree with wholeheartedly, esp matching header fonts to body copy (here is a thing that can help you do that)...
...your alignment across content/element types is jagged and doesn’t let the eye flow down as you skim the page, and your gutters are non-existent in some areas, great in others.
A lot of the modern principles of responsive web design can be distilled from Google’s Material documentation, which is a great primer for content alignment and organization. You can take or leave the button styling, dropshadow, card elements, etc.
posted by Snacks at 12:16 PM on March 6, 2019 [3 favorites]
...your alignment across content/element types is jagged and doesn’t let the eye flow down as you skim the page, and your gutters are non-existent in some areas, great in others.
A lot of the modern principles of responsive web design can be distilled from Google’s Material documentation, which is a great primer for content alignment and organization. You can take or leave the button styling, dropshadow, card elements, etc.
posted by Snacks at 12:16 PM on March 6, 2019 [3 favorites]
Great site - love the photos and narrative. I am inspired by your travels! I agree with comments about updating fonts and losing the slideshow on the home page, going with full bleed. In general, the navigation could be improved. Under Destinations, Some countries have a lot of posts (Cambodia) and they all run together. I suggest organizing by categories and tags - cities, culture, food, title, etc. - and have subnavigation when there are multiple categories for a country. Also, maybe use more subnavigation on the home page, where you can view posts by type (all the cultural posts or all posts about food for example), using heavy imagery, as someone above suggested masonry responsive. In the detailed posts, Integrate images with stories more (example, you mention the andean fox in a recent post but I have to scroll down to see images. On home page, I would move the map of where we are to an interior page and make it accurate. Nitpicky: Maybe change wording of Destinations as that sounds like "where we want to go" rather than "where we've been". I was a little confused by the voice in the posts - using 1st person "I" and then referring to each person in 3rd person by name?
posted by j810c at 9:20 AM on March 7, 2019 [1 favorite]
posted by j810c at 9:20 AM on March 7, 2019 [1 favorite]
Your h3 and header menu links are loading in as Impact on my browser (I guess I don't have Copperplate installed), which isn't a great look. Can you use web fonts instead?
I think your whitespace is generally OK, but when you have an image floated within the text, it needs extra padding. This is most apparent in the 'Wander with us' sidebar and the About page.
posted by Gordafarin at 5:58 AM on March 8, 2019 [1 favorite]
I think your whitespace is generally OK, but when you have an image floated within the text, it needs extra padding. This is most apparent in the 'Wander with us' sidebar and the About page.
posted by Gordafarin at 5:58 AM on March 8, 2019 [1 favorite]
This thread is closed to new comments.
Copyright of the site should be updated - you can use a code like on https://css-tricks.com/snippets/php/automatic-copyright-year/ to insert this programmatically so you don't have to update it each year.
In general I think the site could use more whitespace between entries and space between picture and title, etc for desktop - mobile looks pretty good!
posted by Meagan at 10:40 AM on March 6, 2019