Friday, January 15, 2016

2016 Design Notes

A discussion about the 2016 re-design of Caitlyn's Masks

OK, so this is an ACTUAL post.  I mention that because all the other posts on this 'test' blog are just here to see what they would look like in this new format.

I wanted to have an actual post about this as I want to offer up some options to see and talk about, but I can only have one 'test' blog. So if I wanted you to see several different header graphics, I'd have to post one a day and have you try and remember each.   Not really conductive to an opinion.

To catch everybody up, this is me doing a major re-design of my cap blog.  Here is what my old blog looked like:


Not bad, but dated.  The layout changes were rather simple... move down to two columns, and extend the 'post' column to be much wider.  This allows me to focus on the images in the posts much more and have larger 'preview' images.   The design changes were a bit more dramatic.  I took out all of the color.  White background, black or dark gray text, light grey column backgrounds.

Here was my first swing:


Once I got this far, I put it up for others to see here.  I made a post about the redesign on the main blog and asked for input:

alexis michelle liked the new look (and was very flattering in complimenting me!), but mainly said that it should be my call.

Courtney Captisa liked it and said that she enjoyed the same white background style on her own blog.

Ambyr said that she liked the layout but "...the header feels ...grim maybe? The mask in black just seems more downbeat to me."

And finally Alectra Play thought it looked too flashy. She went on to say that it was quite a contrast to my current design, but thought that the colors would make it easier to read.  She says she likes the layout and finished by saying that it was professional but had lost some of it's spark, and was maybe too formal.




So that's where I started from today.  The first thing that really jumped out at me was what Ambyr said.  I too felt that the big dark logo was 'grim', but couldn't quite put my finger on it.  I was really missing the forest for the trees, and she nailed it.

I appreciate both alexis' and Courtney's comments.  Knowing that others like it is important.  If I get mostly comments like that, I'll know I'm done.

Then there's Alectra.  I know I can always count on her for a good honest opinion.  I'll admit that I'm a little confused on the 'flashy' description.  To me, it's lost a lot of it's flash.  The previous design had gradients, and stripes, and shadows, and while it was one color in the spectrum (pink) I thought I had used it well and kept the variety up.  So going to black and white and losing all the little flairs like shadows and gradients, to me at least, is far LESS flashy.  So I'm going to put a pin in that part of  her comment and just move on.

She said it was quite a contrast to my previous design.  Thank you!  That's what I was going for.  I didn't want this to be an evolutionary step, I wanted it to be a revolutionary step.  So at least on that point I hit my mark!  The last part of her comments were basically 'too formal and professional' considering the topics I'd be exploring.

Coming from a design background, I like the idea of something looking professional and formal.  I don't want this ever to be confused with a geocities website (remember those!).  I can appreciate that the professional and formal layout may be jarring when it comes to the raunchy TG material I'll be posting.. but I don't think that those things necessarily have to be separate.  Some of my favorite porn (you see it often enough in my caps and obsuras) has a very high quality professional look to it.  It ain't no snapshot!  X-Art, PassionHD, Wowgirls.  Sites like that look professional and formal even though they are all hardcore porn.  So while I appreciate Alectra saying it, it's something that I AM happy with and will have to disagree with her.

Before I get on to the tweaks, I want to say that I love all four of these comments.  Simply having a comment saying that you like it is helpful.  Saying that there are parts that you don't like is helpful and can often point something out to me that I didn't notice.  And lastly even if I disagree, I like the thought that Alectra put into it.  I know that she didn't just glance at it and give it a thumbs up or thumbs down.

OK... so what I focused on was the header logo.  I agree that having it be the only dark thing on the page was a bad idea. I should say that the black and white logo was actually my second attempt.  To fill the space up and not have it be black, I took my 'current' blog logo and just took the dark background out of it.  Here's what it looked like:



My impression was... to much pink.  With no other color on the blog to balance out the option there, it just SCREAMs pink to me.  And not even a good pink.  That color selection works on a dark background but on the white, it's just.... too bold?

So with that in mind, I decided to make it even more basic.  Take out the gradients, and dark colors and make the logo based on the grey I have in the layout:


It still seemed quite heavy, so I reversed it:



And that's where I am now.  I probably won't get as much chance to work on this over the weekend, so I hope I can count on you telling me your opinions.   If you like it, I'd love to hear it.  If you don't like it, I'd love to hear that too.  If you hae specific areas that you like or don't like, I'd love to hear that even more!

For my two cents, I this last one (the light gray on the white background) is a winner.

Thanks for your input everybody!

Caitlyn





Edit:

I tried out what Dee suggested in a comment below by adding a shadow to the banner.  I have to say, I'm not a fan but I don't dislike it as much as I thought I would.  Normally when I go for a shadow effect I have it fairly heavy, but I kept this one a little more subdued and I don't think that it 'breaks' the design.   I'm leaving it up for now but if I had to choose between shadow and no shadow, I think I'd still go without.  Lemme know what you think.

Oh, and just in case I change it back later, here's the banner with the shadow:


11 comments:

  1. This is Caitlyn, just testing to make sure annonymous posting is available. If you want to post a comment but don't want to have your name associated with it, or just don't want to bother logging in, you can do so! Just select 'Anonymous' in the 'Comment as:' selection box!

    Again, thanks for reading and thank you for chiming in!

    ReplyDelete
  2. I would suggest increasing the margin within each grey post block. I would also suggest Source Sans Pro, Fira Sans, Merriweather/Merriweather Sans, Alegreya/Alegreya Sans, Open Sans, or Crimson Text as alternate typefaces. All are freely available through Google Fonts.

    ReplyDelete
    Replies
    1. I'll have to see if blogger has that fine of control. I'm not sure that I can adjust the margins inside of the post block. As for the font, I'll see if I can add those fonts as alternatives, but I really like this font as is. It's the same one I use on my current blog design, so I've been using it for several years now.

      Let me ask this... is the current font difficult to read? Or is it just an aesthetic choice?

      Delete
  3. I'm not feeling it at all .. but I can understand why others like it, and I bet I have a good idea why they do and I don't.

    First, I'll tell you what I do like. The widened column that contains your work. Much easier to read and will probably make your longer posts look less like you've written a novel in it. The one column on right works great too, though I would move labels down towards the bottom. When you switch over to the "real" blog, that labels section is going to be big. The top spots should be for the promotion of your work and links of those you enjoy.

    The main problem I have is it is WAY too bright, with all the white showing .. which as we've talked about within the realm of captions, amounts to a bucket of dead space. It was that way on the old blog too, but the black wrapped all the other elements of your blog together. Here it just seems like the elements are floating over the void.

    I am betting that others are looking at your blog on a phone, tablet, or laptop, where the biggest resolution is probably 1280x800 or something like that. I am viewing it on a 1920x1080 HD monitor at 100 percent and I see more white background than I do your actual content. I see approx. 6 inches of white blank void from the end of these comments and the right side of the web browser page, and 4 inches from right column and browser edge.

    And for the banner, if you keep it like this, I would at least put some shadow on the elements inside of it or darken the pink/purple of it slightly since it seems to blend into the rest of the white.

    Sorry about being a bit negative, and whatever you decide to do, I am still going to come here and read your stuff. But I think at least I gave you reasons why I didn't like certain things.

    ReplyDelete
    Replies
    1. Thanks Dee!

      So far, it seems that the wider post block is universally popular. So at this point the basic layout is locked in. I'd still like to hear from anybody that doesn't like it if they're out there though!

      On the exact layout of the gadgets along the side, I'll work those out once I fully implement the layout on the main blog. I have many more gadgets there to play with and I'll want many of them to be at the top (recent comments will certainly remain near, if not AT, the top).

      As for the brightness; I feel you. Everything else being equal, I'd probably go with a dark theme. Maybe even black. BUT, one of the big drivers of this change is wanting something different and I just don't think that staying in that dark spectrum will be enough change to satisfy that itch. I did try a lean in that direction and went with a grey background.... ick. It was neither 'clean' like the white nor was it 'dark' like the black. For now I think it's going to stay white.

      I do understand your concern when it comes to resolution as well. My resolution is 1920x1200 but I don't view the web browser at full resolution. To me that's the advantage of having such a large resolution. I can have my web browser 'wide' (it takes up about 70-80% of my screen real estate) while still viewing things behind it (photoshop, my desktop, other browser windows, word).

      Lastly, on the banner. I'll give some shadowing a try and add it to the above post. But my initial feeling is that I won't be as happy with it. Once I ditched the color and then ditched most of the gradients, I was really happy with the flat simple look. I think adding some shadows or some outlines (both of which will make it pop more), will take away from that 'simple' look.

      You don't ever have to apologize for being 'negative'. First, I don't see comments that are based on opinion as being positive or negative. They are your opinions and all opinions are valid and therefore positive. Even if they are going in a different direction than me. And you never know when your opinion is going to strike an idea in me and help guide me in a better direction. I appreciate you sharing your opinion with me and really appreciate you constantly coming by and reading what I have to offer.

      Delete
  4. As a followup, I'm not sure, but there might be a way to convert the blog into a mobile version too. This layout might work better as a mobile design. That way, your device will decide which way it views your blog and you wouldn't have to worry about it as much.

    ReplyDelete
    Replies
    1. So far as I can see, blogger automatically takes whatever your 'desktop' layout is and transforms it into a similarly themed 'mobile' layout. It follows the colors and basic graphics but ensures that it will take advantage of the limited screen space. For instance as I look at this blog on my phone it has the banner, a drop down menu of 'home, caps, copyright disclaimer...' then moves on to the posts. The posts have small square title graphics and then my teaser text to the right of that graphic. When you jump into a post it then shows the full 'header graphic' along with the full post, but on neither page does it show the gadgets to the right.

      So.... I don't think you can have your mobile experience be all that different than your primary experience. And I think blogger does all of that on the back end as my primary blog is laid out the same but has a black background and white text as opposed to the white background and black text that I show here.

      Delete
  5. I want to thank all of your for your comments. Praise and criticism are both welcome! I've continued the discussion over on the text blog, and still welcome any more thoughts on the new layout/design.

    My thought right now is that unless someone inspires some major change I'll be swapping over to the new layout/design this coming weekend.

    Thanks again!

    ReplyDelete
  6. Looks good on mobile!
    Although the grey in the logo matches the side bar grey, the logo could use just a little more contrast. I think it would still look good if you darkened the grey in the logo an left the lighter grey on the sides.

    Overall the layout looks good!

    ReplyDelete
  7. Sorry I didn't get here earlier, but I think the gray is much better. For what it's worth, I'm here on a tablet.

    ReplyDelete