Had a few days where I couldn’t work on the project much, but I spent some time on it this weekend to push it forward another step.
One unexpected change: I woke up Saturday morning to find my that brain had been having a discussion with itself overnight about the FYC site, and whether I really had the cycles and motivation to keep things fresh and build content for it reliably. The decision of this internal oversight committee was that I don’t.
And in thinking about it, that’s correct. For at least the next year, much as I’d like to build out that part of my content suite, it’s — not gonna happen. Or not reliably. And it’s a bad idea to build out something that ends up looking like a ghost town and building virtual tumbleweeds.
So the content I’d planned for FYC is being rolled back into the main site, and I’m only going to do a split out the photography content from the main site, and leave everything else on the main site. That decision has me wondering if I should do the revamped main site in Photocrati instead of the theme I’d decided to use. I’m going to take a few days to chew on that — whether I want the two sites to share a strong common design look with differences, or whether I want the two sites to have distinct looks with common elements. I can make good arguments either way. Going with Photocrati would be simpler because I could share more of the design across both sites, but I’m not convinced that’s what I really want. Decisions, decisions.
Speaking of decisions…
Speaking of decisions, I’ve built out the new photo site and started using it to build out the design. Again, to my surprise, it came together surprisingly fast (6-7 hours) and I’m pretty happy with it — I think. I need to live with the design for a few days and let it sink in to see if I continue to like it.
Here’s the current look of the front page. (you can see the site here at photography.chuqui.com)
Some of the thinking behind this look. I knew I wanted the front page to feature the photography and as a large carousel of images rather than a gallery or slideshow. I considered going full bleed, decided against it.
To show off the images, I knew I wanted the background behind it to be fairly dark, relatively unsaturated, close to a neutral color, but I intended to design this site around blue so I wanted the background to have some touch of blue to it. I decided I liked this color, which is the pre-defined value for “dark slate” — it’s really a grey with some blue in it, and I don’t think that will clash with images.
All of the other colors are keyed off of that (with one exception). the text is an extremely dark version of that color — close to black but not completely black. The header and footer backgrounds go the other direction to be lighter, but with the same color and saturation values. The drop-down menus, since they cross both the light background and the dark background, needed their own value so it takes on the color of the text with the text being the light background and then reverses for the chosen item. The footer mimics this.
The menu’s been refined out. The logo and branding has been brought from the existing site and revamped into the new color scheme and tweaked a bit to fit into the design.
I’ve been experimenting with various image sizes to see what the best size of image to use; right now I’m standardizing on 1500px wide as the max size (probably not optimal for Retina displays, but I still want to limit image size online as a way to reduce the impact of piracy; there is no great tradeoff here). I’ve shifted to a much lower-visibility watermark, and since I’m not going to do any kind of printing or distribution off the site (well, officially. If people grab stuff, that’s different) so the watermark is being added on export from Lightroom. I’ve been working on the selection/management/export part in Lightroom and the import/organization part within NextGen to make sure that all works smoothly, and I think I have that under control — the less of this stuff you standardize up front and build processes for, the more chaotic your life will be when you roll into production.
As with the current version of my site, I’m going full-width with the “sidebar” content either being made accessible through the menus (like the blog archives) or in the footer, because I find the sidebar cramps the width of the main content area and clashes with the images, and I want the images to stay front and center. In studying most sidebars, I find most of the content there is being given much higher priority on the site than it deserves, so I’m less and less enamored of sidebars on sites. There are a few places where this decision will complicate other decisions — but I want the content to be the star here, not the administration. Is that true on your site?
Along the way I came to the conclusion the site was too monochromatic and needed some element to break up the endless display of blue. The obvious places to add that were in the headers, and for the main header I went to a compatible red because it’d make it easy for the eye to see the start of an article, and for sub-headers I went with a dark version
The dark background complicates the text pages. For instance, the blog page needed some work to make it usable, so I had to hack the theme a bit to display the text on a light background. I personally hate white on black text almost as much as my middle-aged eyes hate text displayed in a low-contrast setup, so I am always going to design with dark text on a lighter background. While the background isn’t white, there’s good contrast.
The links were another place I could toss in a bit of color, so the links are using the red I used in the headers. The hover effect needs to confirm to you that it is in fact a link, so there needs to be a noticeable change when you mouse over. In this case, I think it’s okay to use that low-contrast because it’s the change from the non-hover that matters and because your cursor already has focus on it — in that case, it’s less about readability than confirmation of that mouseover action.
Finally, while none of the fonts I’ve chosen are locked in and permanent, I’m pretty happy with the choices right now; the text font is a slab serif, mainly because I’ve wanted to design with one for a while and see how it works in practice, so I’m curious what you think of the readability. Right now, I like it.
The pages (as opposed to the blog postings) are used for the longer articles, for landing pages, and for portfolios and because of how the theme displays this, I’m having to introduce custom elements to hold the text rather than just overriding some CSS (I’ll probably move this into a custom page template when I finalize it). As you can see below, I’m testing the look of things within that element. All in all, the customization at this stage is quite minimal and I can use the existing theme structure as is without a lot of tweaking — some of that is by making decisions that take advantage of how the theme is built rather than trying to fight the theme to do things it’s not set up to do natively.
This sample portfolio gives you a look at my current choice for showing off a portfolio page, which is a masonry style display three wide. For the galleries on the main site, I’ll use a similar look, but five-wide, so there’s a visual difference between the portfolios and galleries. For individual images I’ll use NextGen’s Singlepic style, and for multiple images inline in a blog or text block where the images will live within the light background, I’ll either use the NextGen slideshow, the NextGen blog display block, or as I do on this sample portfolio, use multiple text blocks to put the images back on the dark background — depending on what’s visually less cluttering.
Right now, it seems like things have moved quite far along, and you’re right — except….
So, imagine you’re custom building a house. You’ve poured the foundation, you’ve framed it, you’ve added the roof and closed in the exterior walls so the house is waterproof and you’ve framed the insides and are putting up the electrical, the plumbing and then putting up the drywall. At that stage, a house under construction seems almost done, but it’s not. You have trim, you have appliances, you have paint, and carpet or flooring, and window coverings and outlet covers and… the sheer amount of detail to finish a house can be amazing. And then once you get to the point you can move in, they drop off a truck or three of stuff you’d left in storage and dump 20 years of boxes and furniture into the rooms for you to organize and put away.
As far as this site’s concerned, I’m at that point where the drywall is mostly up and I’m picking wall colors, but there’s a large number of small design details I still haven’t started working on — to name just one, the way a blog post’s author information is displayed doesn’t work for me and I need to go redesign that. Same with ordered and unordered lists.
And then content. Oh, god… it’s going to take a long time to clean up and move the content, rewire all the images, fix the structure of all that content, update outdated content, etc. Putting the furniture in the right places isn’t that difficult, but there is 20 years of boxes of virtual books and pictures (that need framing and hanging). I’m estimating I’m maybe 30% of the way through this just for this site in terms of number of hours I’m going to have to invest to get there.
I could cut corners, but then every time I look at it, I’d see stuff that doesn’t look right or act right, and even if you, the viewer, don’t pick up on it, elements will be off and the site won’t come off as well as I want it to. Some of that I can automate, but everything will have to be manually reviewed and edited to fix at some level or another.
But it’l be worth it, and part of doing all of that now is to make sure I don’t have to think about it until the next major redesign…. And since two of my goals here — removal of all flash display blocks and shifting to a fully responsive design for mobile devices — can’t be done without going through all of this, it’s worth it. And Having looked at the current site on both iPad and iPhone, I’m pretty happy with the results on those devices so far.
Once I decide on my final theme for the new main site, I’ll start rolling in the design there. Right now I’m thinking to make them be distinct but clearly related is to swap out the light/dark backgrounds, which since the other site will be a lot more textually oriented will make the design a bit easier. And from that decision a lot of the other design ideas (font colors, etc) will be easy, too.
But I want to emphasize, I’m at the point where a lot of the easy stuff is done, but there’s still a huge amount of work to do, and much of that work is the kind of grinding hand work that takes a long time to do and which can get really boring while doing it, but which ends up making a difference between a site that feels slapped together and a site that people like to visit.
If there are two lessons to reinforce to people following this and thinking of doing their own site setups, it’s these lessons:
- Installing the server and wordpress and installing the theme is the easy part. No theme is going to 100% solve your needs or present your look at first install. How you customize and personalize the theme is going to make a huge difference in whether people see your site as something sloppy and generic or something polished and personal. it’s worth the effort, if you’re going to open the hood and do something like this, to do it well.
- And if you’re going to go through the work to update your site and modernize the look and feel, you’re really doing yourself a disservice if you don’t clean up your content as well. that part can be mind-numbingly manual and grinding — but people (and the search engines) notice the broken links and ugly formatting and other problems that crop up over time, and if you don’t fix those things, they’ll be things that encourage people who do find your site to not come back. Sloppy look and feel will make them see the content as sloppy as well, and you’ll find it a lot harder to build your reputation and grow your audience if you don’t sweat the details.
And now, back to testing…