Jump to content

New Design


alphanumetrix

Recommended Posts

Okay. I've been working on it, and it's primarily together now. Here is the new layout for my site: http://akatsukidesigns.com/beta - I spent a lot more time on this one (especially with thinking of a good design - spent a good two-three hours thinking about it before I even started). Overall, I spent a good 10 hours on this (just about all of yesterday).

 

What do you think? Feel free to criticize. :D

 

Some things I personally don't like about it:

 

there is about 300kb of images - that's a lot

i didn't make a lot of content room - mostly 'cause i couldn't decide if i wanted a lot.

 

 

-----

 

I decided to put my own font on the site (using CSS); however, it's only working well in Safari. Anyone know why this might be?

 

Oh, and I didn't finish this yet; i've still to do some CSS bridging, so if it doesn't render well for you, please let me know what browser and version you're using. I didn't validate it yet either, so no criticism on that yet.

 

thanks to Maq, jcombs_31, and nrg_alpha for inspiring me to make a new one.

 

Link to comment
Share on other sites

Much better step forward (although I wouldn't call it a Beta, as there are no functioning links... at best, pre-alpha?)! In any case, splitting hairs here.. the look is miles ahead of your previous attempt. Here are my thoughts on this one:

 

  • The content-less space under the spheres look rather akward. Could this area be filled with something useful? (not the end of the world by any stretch).
     
  • I'm not digging the text indenting (at least, not the ones after the initial indents.. so in multiple stacked paragraphs, if you use indenting, I would only indent the initial first paragraph, all others below could be simply flush left.
     
  • Perhaps lightening up the font to make it easier to read? Perhaps a more light grey (or white?). The text in the footer is harder to read as the text / background colour is closer together.
     
  • I would stylise those headings.. The current font face for Welcome, Expectations, Great Customer Service, Skilled Professionals, and Quality Services feels out of place against the design.
     
  • I am noticing that you are using multiple small images to construct your header. This is not wise.. the reasons being:
     

  1. A collection of smaller graphics are bigger than the visual equivalent of one larger one, as each separate graphic has its own filename, colour table, etc.. these add up in memory.
     
  2. By using more images, you create more HTTP requests, as for each unique image the browser comes across while building your page, it has to request for this image from your server. This eats up more time and can have adverse effects on site performance.

 

[*]Instead of using all those smaller images for your header, go ahead and load one full sized image instead (optimized of course). This will cut down on http headers and also some file size.

 

[*]On the topic of optimizing images, I'm not sure if you are aware of smush.it! If not, I would urge you to check it out.. a great way to compress your images without the loss of quality (plenty of under the hood optimizations).

 

[*]You should avoid using tables for constructing your layout. Learn to build using only CSS. Tables should only be used for tabular data.

 

[*]Kudos on the code validation! Good stuff.. unfortunately, your CSS doesn't quite validate yet.

 

All in all, a much better attempt!

Link to comment
Share on other sites

the look is miles ahead of your previous attempt.

;D thanks. for some reason, i always do really good with dark colors. unfortunately though, i've been trying to avoid it (using them was more of a last-resort). in fact, i started this one with lighter colors (didn't turn out too well).

 

 

(not the end of the world by any stretch).

 

not sure what you mean by this. I was thinking of dropping the bottom sphere, and just putting more content there, or maybe even a flash, commercial-like video.

 

Perhaps lightening up the font to make it easier to read?

 

i didn't want to over-use the white. i'll try it out though.

 

On the topic of optimizing images, I'm not sure if you are aware of smush.it! If not, I would urge you to check

 

very cool. i didn't know about this. i always wondered how people put those huge, high-quality images on sites, and still managed to load them fast.

 

You should avoid using tables for constructing your layout

 

i only use tables for layouts when i have high-images. it was faster just to click a button and make a table than writing out 16 or so <DIV> tags.

 

now that i know of this smush.it thing, i won't need to anymore.

 

Kudos on the code validation! Good stuff.. unfortunately, your CSS doesn't quite validate yet.

 

thanks. i just fixed most of my CSS. I have two errors left; i'm not sure how to fix them:

Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : "futura_lt"

6 Property src doesn't exist : url(http://akatsukidesigns.com/beta/themes/default/futura_lt.ttf) format("truetype")

 

do you have any ideas?

 

 

The current font face for Welcome, Expectations, Great Customer Service, Skilled Professionals, and Quality Services feels out of place against the design.

 

What browser did you view them in? The font I'm trying to use isn't showing up in IE or FF. It's only working in Safari. I wanted to use a custom font for those this time, so I googled a CSS code for it. Here is what I'm using:

@font-face {
font-family:"futura_lt";
src:url(http://akatsukidesigns.com/beta/themes/default/futura_lt.ttf) format("truetype");
}
div#some_element {

font-family: futura_lt;

}

 

It's working for Safari perfect, and the font looks really good, in my opinion. It just isn't working for the other browsers. I haven't any ideas how to go about fixing it either.

 

thanks a lot for the wisdom. ;D

Link to comment
Share on other sites

(not the end of the world by any stretch).

not sure what you mean by this. I was thinking of dropping the bottom sphere, and just putting more content there, or maybe even a flash, commercial-like video.

 

All I meant is that the vacant space looks awkward, but doesn't necessarily kill the design or anything.

 

Perhaps lightening up the font to make it easier to read?

 

i didn't want to over-use the white. i'll try it out though.

 

Oh, it doesn't have to be white.. a light grey might work out too.

 

You should avoid using tables for constructing your layout

 

i only use tables for layouts when i have high-images. it was faster just to click a button and make a table than writing out 16 or so <DIV> tags.

 

now that i know of this smush.it thing, i won't need to anymore.

 

I think there's confusion here. Smush.it! only optimizes images. It is not relevant to site layout construction techniques. Whether using one image or mulitple images, its more advisable to code without using tables (for layout purposes). Using CSS, you would not need 16 divs for these.. images are block-level components that can be 'stacked' all into one div by example. But again, even going this route is not recommended.

 

 

thanks. i just fixed most of my CSS. I have two errors left; i'm not sure how to fix them:

Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : "futura_lt"

6 Property src doesn't exist : url(http://akatsukidesigns.com/beta/themes/default/futura_lt.ttf) format("truetype")

 

do you have any ideas?

 

Hmm.. is the declaration format("truetype") needed? Have a look at this link from Mozilla.. I am noticing the format is different from what you have. The W3C confirms this (section 15.3.1 titled: Font Descriptions and @font-face).

 

The current font face for Welcome, Expectations, Great Customer Service, Skilled Professionals, and Quality Services feels out of place against the design.

 

What browser did you view them in? The font I'm trying to use isn't showing up in IE or FF.

 

Ok.. I tested this font in Safari, and it works... perhaps once the css error is hammered out, it *might* work on all browsers (as css implementation is not equal across all browsers.. so no guarantees). But I would look into fixing the css errors first.

Link to comment
Share on other sites

Minor text changes in Welcome message

"decsion" to "decision"

possibly revise, "ensuring we're making you exactly what you need". It doesn't read fluently to me... consider something like, "ensuring we're making your internet presence is exactly what you need", or some other keyword you want (SEO in mind)

Link to comment
Share on other sites

Minor text changes in Welcome message

"decsion" to "decision"

possibly revise, "ensuring we're making you exactly what you need". It doesn't read fluently to me... consider something like, "ensuring we're making your internet presence is exactly what you need", or some other keyword you want (SEO in mind)

 

thanks. i'll revise it after I finish it though.

 

I'm going to try to work on it later today.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.