It's been almost two years since my current (v2) gold & yellow design hit the web. I'll admit it was a huge step up from v1.

In Version 1 I used images just about everywhere. It was a great concept and in ways, was ahead of Version 2. I had Back & Next links pretty well integrated, something that Version 2 still has yet to officially acquire. It was just a lot of work and I cut many corners (e.g., the galleries). I coded all nine images in and added the images as I did, without modifying too much of the source. As a result, depending on your browser, you'll see broken image placeholders frequently. It was also purely in HTML.

In Version 2 I took away from the dark, colour of Version 1 and got a little bit richer with deep yellow and red. I favored the change. A friend designed the concept and I did the rest. I had difficulties in getting it to look identical. One cut-corner left an omni-present horizontal scroll bar that I got many comment about. The way I created the website, left no easy way to implement back and next links. Version 2 started out as strictly HTML as well. It got PHP before it was a month old (April 2010). It's still largely HTML with incredibly static PHP scripting; however I'm working on changing that. (Thanks!)

Version 3, will be even lighter. I deciding to shy away from a lot of colour. I wish I had kept working examples from old concepts I made for Version 2, I still have the photo mocks (from before the name change), for all. Three. Iterations. I'm not particularly keen on any of them. For one, I don't really want gray, nor a side navigation. I also don't want a "compartmentalized" layout as it could feel restrictive to certain elements. In Bv2, I have come compartments but it's the body is open. I'm not liking it, but I'm not against it.

Same story with the side navigation. I'm not a fan, but I'm not against it. What five colors would go well together? I've been looking at color palates but haven't found anything yet. I'd like to loose some of the masculinity the Version 2 has: the rich colors, the hard edges. I've been talking with friends and colleagues, and they mention that girls look for portraits more often than guys. So, I should try to market my website towards the feminine crowd. I'm not thinking pinks and purples (ha) but rather light colors.

I don't want a white theme as any photos that have a white background, but aren't "pure" white, will look awkward and those with pure white backgrounds will blend in. So, any ideas toward colour would be great, ideas for layout would be cool too.

I figured I may as well restyle my site now, since I'm doing a lot of work to get the site to work with the script. (Okay, it's not a lot of work, but I've streamlined the headers and footers, and it would take some work to adjust each page of the site to use those new includes. I wouldn't bother but the page will error and die out if I don't.)

I'm currently coming up with designs without color, and will share my concepts with you guys Smile
I've got quite a nice mock - with color! - created. I plan to utilize CSS3 a little more heavily this time. I think I used some CSS3 in v2 but I'm not sure. I plan to use "Media Queries" to create a dynamic website. I am thinking of creating two layouts for desktops: one single, centered column another two column layout that spans the width. The second layout there is a 50/50. I'm not familiar with two column design and how to balance it. Those same media queries will be used to style the site down for mobile handsets.

I looked through Adobe's Kuler web-app and found some great color combinations. I searched for "Girl" and found a fairly "bisexual" color scheme; It's a bit green for my tastes though. Tifreak? Very Happy On the subject of colors, I changed my CSS to PHP, so I now have default.php instead of default.css. I did this for one reason, it'll be easy to change the site colors once I get an HTML mock. I changed the colors a bit much on my graphic mock that the corners of some aspects rounded out, which I'm in favor of.

The header "Services" is found on the About page is an H2, the "Go Back to Portfolio" is an example of what the buttons for Next, Previous and up/back will be. I didn't feel like making a new mock for the image viewing so I just did that. I'll mock the style in HTML then use the PHP CSS file to quickly change colors.



You can download the full size through the appropriate links in Facebook.
What you need is some sort of color scheme designer.
Website has been restyled. The CSS is now PHP and the values for the five colors used are stored in an include called by the "CSS" file, making the colors easy to change in the future, which I expect they will. I plan on doing something so I can switch between them with some $_GET variables. I also need to add the font file used in the image so I can match the header font. I'll take care of that tomorrow though.
comicIDIOT wrote:
Website has been restyled. The CSS is now PHP and the values for the five colors used are stored in an include called by the "CSS" file, making the colors easy to change in the future, which I expect they will. I plan on doing something so I can switch between them with some $_GET variables. I also need to add the font file used in the image so I can match the header font. I'll take care of that tomorrow though.


Rather than using PHP to generate your stylesheets, try using SASS http://sass-lang.com/ or the less-awesome LESS http://lesscss.org/.

Also, while kuler is great, you should also scour Dribbble. Aside from helping you find color schemes, it also helps you identify elements that help you communicate your ideas. For example, http://dribbble.com/search?q=feminine&x=0&y=0
I sort of agree with Nikky on this; you need a nice color scheme with complementary colors; I'd recommend taking a glance at a color wheel if you're not familiar with it, and seeing if you can find something that pops.
I have some faint familiarity of colour theory from my 9th grade class all those years ago, but nothing concrete. I'd like to learn colour theory and hopefully my deadline of February will give me time to do so. But I still plan to use colour themes from others; mixing and matching is also an option I'm exploring.

That is a great suggestion rthprog, thanks! I think I'll hold off for now though. I've got the syntax for CSS and PHP, and it seems natural to combine both at the moment. I haven't looked to deep into SASS, however.
comicIDIOT wrote:
I have some faint familiarity of colour theory from my 9th grade class all those years ago, but nothing concrete. I'd like to learn colour theory and hopefully my deadline of February will give me time to do so. But I still plan to use colour themes from others; mixing and matching is also an option I'm exploring.
That works too. Smile I think nikky's point was that your current color scheme is serviceable and gentle on the eyes, but perhaps a little too bland, which I'd agree with. As far as the layout goes, though, I think it's looking good.
Yeah. almost a dual tone colour theme would work, my current is way to monotone (despite being light and dark).

The PHP CSS will help me quickly change the colours, which will be better than getting the colours in photoshop and viewing it there.
It looks like carrot barf.
Haha, currently? It is a tad orange. I'm still exploring options though.
I don't really like the current color scheme, though I'm not sure what I would change it to. Have you tried using light pink or light blue as the background yet?
I just changed the colors last night, actually. But I'm still not a fan of the colors. It's something that'll likely develop later on.

I'm thinking about introducing the groundwork for a user system of some sort. Something primitive, for at least refreshing the portfolios with new images: setting image directories for source, full-size, thumbnails and what text or file to use for a watermark. Stuff that came up in the "Dynamic Web Galleries" thread, basically.

Update: Changed the colors to three, hoping to find a great triad of colors, five was just a bit complex for a photo site I think. Still working on getting the text layout to be marginally different than v2 so it's more it's own style and not a rehash of v2 with new colors and a narrower profile. I think as a result of few colors I'm going to add some texture and see if that helps anything, unlikely but it's worth a shot.

On the subject of "texture," v2 was incredibly two dimensional and plain. I'd like to break into the third dimension - to any degree - with v3 (just a coincidence) by maybe going back to an image based theme. I'm not the best graphic artist so I'll see how that progresses as I near the deadline.

I found some great 3D examples too.It doesn't have to be severely 3D just something that separates the elements of the page. I've been with the flat-style layout for a while and it just feels too amateur. I feel like some style, depth, would help immensely. I think after I officially update my site I'll start dabbling in JS and JQuery and see what I can add with that great resource.
It's a lot freaking better now.
I found a better colour combination for the time being. It's still not 100% final as it's much darker than I'd have liked. But for now I'm going to focus on how to present depth. I think I'll start by making some new logo concepts and playing around background images.
I've been playing with a new layout in. It's a two column layout, with a fixed position left column and a floating right column where the content goes. I'm not a fan of these layouts but I think it'll allow me to explore more of an integrated experience in the future. I've also been playing with background images/textures for depth.

The settings.php (gears background) is likely going to be for the, with no surprise, the settings for adjusting the portfolios. I was playing with colour overlays and the opacity CSS property in hopes that I would be able to add colour on the fly, but I'm not having much success.

I'm also working on a logo for this layout, which would go where the text "Hello" is. Not a fan of the current logo either, but it's shaping. I'm going to try and make a crest as if it were a family crest, should make for a fancy watermark.

comicIDIOT wrote:
I've been playing with a new layout in. It's a two column layout, with a fixed position left column and a floating right column where the content goes. I'm not a fan of these layouts but I think it'll allow me to explore more of an integrated experience in the future. I've also been playing with background images/textures for depth.


http://twitter.github.com/bootstrap/
Quite interesting, I'll play around with that! Thanks rthprog!
It's been a while, and I've figured I'm going to go with a two column layout. I won't be using bootstrap as comfortable with it at the moment. I've wrapped the index page in the same footer & header combo, so now it's a bit more uniform. However, it looks tacky. So, I figured I'd squeeze the portfolio information into the sidebar. Works out. It's not exactly finished though.

An issue I face is how would I go about getting the next & previous links in the side bar, my solution is to make custom functions for the index page (finally) so I can call them instead of duplicating code. Over the next few days I'll be doing just that. After I get the style and layout finalized I'm going to start working on colour again.

Hopefully it won't take long and I can start up making the thumbnail generating script and login pages and code, since it's low on the list right now.
I've made little headway due to the new year and a big project I'm undertaking with a friend.

I'm trying to move all the scripting as far up the page as possible, so I can call the header. My new design, with a left-hand column, is two files: a header and the main page. As my current page stands it's a header, main page and the footer. I'm combining the header and footer into the left column (technically the header has an include(footer.php) function). I also plan to incorporate my portfolio/photo navigation into this left column.

I have something roughly like the following as my code. It's important to note this is not the two column layout just yet.


Code:
if(!is_dir($dir)) {
      echo ('
         <div class="attn"><a class="warn">Notice:</a> No portfolio by the name of "<b><u><a class="name">' . $portfolio . '</a></u></b>" was found; the portfolios found are listed below.</div>
      ');
      
      $noport = '<div class="attn"><a class="warn">Notice:</a> No portfolio by the name of "<b><u><a class="name">' . $portfolio . '</a></u></b>" was found; the portfolios found are listed below.</div>';
   } else { blah }

*snip*

echo $noport;

include('res/inc/footer.php');


Now, when I trigger the warning it doesn't show at the bottom of the page. Only at the top of the page. Is this a valid way to store a string to a variable? I assume I'm recalling it correctly. Also, how would I go about doing something more complex such as listing the images that are in a loop? Do I just restructure the loop to continuously write to the end of a string variable then echo/recall it later?

More importantly, would I be better off calling my header at the bottom of the page/script and letting the CSS make room for it? That way I won't have to deal with it and all of the variables I'd need would be already created and I wouldn't have to deal with this. As in, the gallery would render, as it is coded now and the "header/side bar" would get called at the very end of the page.

http://comicidiot.com
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 2
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement