Made some banners for my new website's slider, how do they look?

Hey everyone.

After recently having a job interview for a web design role and getting turned down, I am trying to make sure that all my designs and graphics are as perfect as can be.

For my new website I have designed some banners to use in the content slider, and I would like to know what you thought of them. I need to make sure they look as professional as possible, so any form of criticism is welcome.

My website is dark blue, and attempts to mix the new modern minimalistic trends seen in web design with the older "electric/web 2.0" look.









The biggest problem I currently have is my typography. Choosing which fonts to use and where to place text is still something I struggle with.

The aim of these graphics are to be visually appealing, informative and engaging. Each banner will link to another page on my website.

Something else I would also like feedback on is my actual choice of content for the banners. Just to reiterate, these banners are for my own personal web design homepage/portfolio, and are to be used in the javascript content slider which features in the header. Previously, the slider on my homepage had contained "recent designs", but since I plan on having a portfolio block on my homepage as well, it seems silly to display portfolio work in two separate locations on the same page. So instead I wanted to fill it with content which is relevant, unique, but not vital for the whole process (ie; if a potential customer ignored/didn't see any of the slider content, they could still get all required information from elsewhere on the website).

Thanks for any feedback!

 

My concern is that such concepts, no matter how 'pretty' basically mean any site they are put into is an inaccessible wreck, most likely with fixed width layouts and fixed metric fonts. The funky blue text on navy blue background in the first image is well below legibility minimums -- though it's everything I've come to expect from "designers" who generally don't know enough about HTML, CSS, accessibility norms or emissive color-space to be designing much of anything so far as the Internet is concerned.

I'm going to assume the site it's going into is the one in your signature, which reeks of "But I can do it in Photoshop" -- as predicted fixed width layout, inaccessible fixed width fonts, and illegible color contrasts... mated to non-semantic presentational markup.

Poster child for everything WRONG with "design" today. This is exactly the type of nonsense I'm constantly railing against on here, as it very much falls into the "Very pretty, but what good is it?" category of design. All flash, no substance.

 

Thanks for your response.

The site in my signature is quite old, over a year, hence why I am making a new one.

This is the new site they will be displayed on (index page preview only):

http://edmundreed.co.uk/bootstrap/

I am utilizing the twitter bootstrap framework for my new website, I think doing so addresses many of the issues you had with the old version of my website.

Your point about the contrasting colours in the banners is a good point, though. As I said that is the sort of thing I struggle with.

 

Actually, some garbage off the shelf framework with endless pointless scripting for NOTHING, like the train wreck known as bootstrap, is even WORSE. You've still got illegible colors and illegible static font sizes, and worse you've now got a 2 megabytes in 90 files when the page isn't even COMPLETE and only has 5k of plaintext on it? WORSE, 30 of those files and almost a megabyte of it is javascript... FOR WHAT?!? Even the ridiculously absurd 125k of CSS in 12 stylesheets is mind-blowingly BAD.

If things like this:

   <script src="assets/js/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/jquery.easing.1.3.js"></script>
    <script src="assets/js/jquery.slabtext.min.js"></script>
    <script src="assets/js/jquery.flexslider-min.js"></script>
    <script src="assets/js/superfish-menu/superfish.js"></script>
    <script src="assets/js/plugin.js"></script>
    <script src="assets/js/jquery.prettyPhoto.js"></script>
    <script src="assets/js/twitter.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="assets/js/jquery.gmap.min.js"></script>
    <script src="assets/js/jquery.preloader.js"></script>
    <script src="assets/js/custom.js"></script>
	<script src="assets/js/application.js"></script>

Code (markup):

... aren't telling you you're doing things wrong... just... WOW.

Especially for a site that without the image rotator content in there yet probably shouldn't need more than 140k in a dozen or so files. There's a reason I consider off the shelf frameworks a waste of time, effort, and always piss on accessibility from orbit just as hard as the folks sitting around drawing goofy pictures of websites in photoshop before they have semantic markup of the content and a working responsive layout.

Even the heading orders are gibberish -- you've got no H1, H4's with no H3's before them, H5's with no H4's before them, and get all the way down to H6's on a stack that doesn't have H3 or H4...

Stylesheet LINK without media types, incomplete media stack on the ONE LINK that actually has it, HR where there's not a change of topic, attributes like TARGET that have no business on any website written after 1997, a dozen goofy webfonts that render like arse on Windows (and truly qualifies as overuse of typography)...

Not exactly a shock to see 45 validation errors, though being a 5 document validation and modern coding practices are something of a joke anyhow.

Not viable layout concept that's an inaccessible wreck. Throw it out, start over.

Now, having just given you the Simon Cowell treatment, let me put on the Gordon Ramsey chef hat for a moment.

Your problem with colors is easy to fix if you know the MATH -- aka the emissive luminance formula (the simple version):

L = 0.3R + 0.59G + 0.11B

Plug in the red, green and blue values of each color -- foreground and background -- to get the luminance of each. If the difference is less than 50% (128 on a 0..255 scale) it's automatically illegible to as much as 50% of the population, and headache inducing for another 20-30%.

50% difference in luma should be considered MINIMUM, with 70% (180) or more the ideal.

You follow that, it's legible to most everybody, and as a nice little bonus, it's also impossible using that to choose colors the color-blind can't see.

OH, and do NOT use the luminance values provided by photoshop as those are made using the REFLECTIVE formula, since again PS was made for PRINT, not the web.

I think that formula alone could work wonders for you. Likewise if you stop declaring PX metric fonts on EVERYTHING and started using %/em (remembering that if you set PX on a parent element, it defeats the point of even trying to use %/em inside that element) many of the other accessibility issues would disappear.

... and if something tells you to use 100k of CSS in five files and 130k of javascript in 24 files before you're even plugging content into your markup -- don't use it! Like most HTML/CSS frameworks, bootstrap is horrifyingly BAD. Disastrously so. The same goes for bloated garbage like jQuery, 99% of the stuff done using it on pages like yours not even belonging on websites in the first place!