Website Prototype Design

[ChrisHPZ]

I think this is the correct location for this post, and if not I'm sure someone will let me know. So I've been learning about responsive web design in theory and more importantly in practice and I realized that my website is not responsive. Enter the hair pulling aspect of web design. I've been wanting to give my website a makeover in terms of the layout and honestly this is easy enough by just altering the CSS. Well, making an alteration to an already existing site is just not good enough. Figured why not design a new website from the ground up. So that's what I'm doing. Typically I'll make up 3 mock-ups of a website and then take what I think are the best portions of each mock-up into a final composition. So after doing this, the below image is what I came up with. What I really wanted to focus on aside from making my website scalable across the different devices is CSS 3 and HTML 5 tags. Even though CSS 3 is not considered valid code according to the W3C, many of its features are supported in the most popular browsers. This includes even IE 9. I have an HTML version of this image completed but haven't put it on the internet yet as I am nowhere near done with this project. But if work continues at the current pace, I might just be able to have this done by the end of next week. It's all a matter of how well I get along with jQuery as I am still relatively new to using it.

[alixman96]

one thing that distracts me the most is the Gradient on the CDR it doesn't really compliment the colours on the whole website and code css3, W3C will probably get along with it in a few month so your code will be valid then but other than that its has a very cool and WEB 2.0 look to it

PS. your website inspired me to learn more web design as my current website is a crappy template from webs.com cuz I know HTML 5, CSS3, and JavaScript but the thing that moved me away from webdesign was JavaScript when you mentioned JQuery I was like "wtf is that" then I looked it up and it was like "holy heaven that is amazingly useful"

[ChrisHPZ]

LOL, look again at the colors on the CRD logo. Start from the top of any of the letters and work your way down. What do you see there, and when you make that determination ask yourself what those colors are present in? I'm trying to give the answer to the riddle here, but this is where my written communication skills and I do not get along. One more hint to this riddle. Think of Photoshop and the default Mode every New File starts in.

[alixman96]

I understood the first time that it was RGB there is no riddle in it but I still think its kind of a distraction with the whole blue background and white text cuz you know blue and white actually compliment each other but green and blue are kinda gross in my opinion any ways its your website it was just a suggestion LOL

[ChrisHPZ]

Gotcha. I've done graphics like this before and presented them to people. You'd be surprised at how many so-called professionals couldn't make the connection of the colors on the graphic to the primary colors of red green and blue. Looking again at it now, yeah I did have a sneaking suspicion that it is overly distracting. Maybe I'll just do some stupid hover effect with it that transforms the colors. Pretty sure I read that this can be done as well with CSS and jQuery.

[ChrisHPZ]

Work is coming along on this project. The screenshot below is of the web design section of my site. The module below the navigation is a jQuery Carousel plugin. The effect of this plug-in takes a series of images and rotates each one into view based on a particular user click. It's hard to describe it as anything different than say how a planet would orbit the sun. Except in this case, there is no sun but rather a center point in which the images are orientated around. http://fredhq.com/projects/roundabout/ <--is the link to the plug-in's creator. Only three more sections to go to make. At the suggestion of alixman96, redid the CRD logo as he was totally right in that the former rendition was too distracting. Thanks go out to him. Might brighten it up a bit as I think it is a little too dark against the gradient background.

[alixman96]

looks really good now and yes I think you SHOULD brighten it up a bit but other than that its prefect I espesially like the rotation effect because its something new and I haven't seen it used in a lot of websites

[ChrisHPZ]

Been a few days since I posted an update on this project as I've been busy finishing it and doing homework. Well this project is done now. I think I can say that after 4 revisions of my portfolio website, I am happy with it. Ton of jQuery went into this so it will be viewable on mobile devices. There's a few more things I want to do such as alter the website dimensions so that it display's properly on smaller screen sizes, but the fact is that I'm coded out and need a break. Brightened the CRD logo like everyone including myself thought I should. It was too distractive in light of the base colors of cyan and black. Took a close look at the graphics that used to be on my site and removed a bunch of them. Truth is that those images might have looked good to me at the time, but since then I've improved with Photoshop. I want to thank everyone who offered their honest opinion and suggestions along the way of this project. That is what web design is all about; collaboration and communication.

http://www.cdemarco.net

[ibclare]

Hi Chris. Nice. My only critique is about the left hand insert. It bothers me a bit (but not much) that it doesn't come down as far as the rest and also starts higher -- which of itself could be OK but to me just seems imbalanced because of the bottom of the insert. Maybe if you narrowed the column, it would lengthen and to me that would balance better. I'd also consider seeing how that text looks when justified.

I liked your initial design for the CRD, but I think this one works better.

[ChrisHPZ]

Justified the text, you're right it does look much more uniform. I was checking some of my bookmarked websites and it seems none of them use the text-align:justify; property. Granted these bookmarks are just a handful of sites but it appears that justified text is not very common. My eBooks for college though all use the justified text, curious isn't it. Not a whole lot I can do about the text in the left hand except add more content. I thought about putting a contact form in that area but best practices and user expectations dictate to use the footer area for that sort of thing. Thanks Clare.