[RFlyGD] - I think I've got it right now.

[razorianfly]

Hi Guys,

You may remember I posted a template design a few weeks back now.
I asked for critique, and by god you gave it to me.

Most of you hated the design, one member described it as garish.
So I took the advice to tame the design down a little.

Ok - Who am I kidding? - it's an entire re-design.

The design is for my freelance graphic design site located at RFlyGD.com.

Through it, I will offer two design services:

- iPhone and iPod touch icon design
- Web Design (Coming Soon)

Made with iWeb 2.0.4 and Adobe Photoshop CS3

It currently has some of the portfolio up, with more to come shortly.

Please let me know what you think,
and if you find any dead links, let me know!

Cheers,
R-Fly

 

[Cabbit]

the margin on the right and left are hugh, try setting them to auto so that it centers the site without 300 px of set margin.

However i love the clean design, though until your are more competent i do not suggest advertising web development to clients. You should learn clean efficient coding that complies with accessibility guidelines and w3c web standards before offering web design as you will come across unprofessional to clients who will ask you tuff questions and demand these things as standard.

 

[notnek]

imo, i wouldn't hire a web designer who built their online portfolio using iweb.

agreed to setting margin to auto. i'm on a rather large screen and have your content is off centered and causing me to scroll to the right to center it.

 

[razorianfly]

the margin on the right and left are hugh, try setting them to auto so that it centers the site without 300 px of set margin.

However i love the clean design, though until your are more competent i do not suggest advertising web development to clients. You should learn clean efficient coding that complies with accessibility guidelines and w3c web standards before offering web design as you will come across unprofessional to clients who will ask you tuff questions and demand these things as standard.

imo, i wouldn't hire a web designer who built their online portfolio using iweb.

agreed to setting margin to auto. i'm on a rather large screen and have your content is off centered and causing me to scroll to the right to center it.

Thanks for your feedback.

I don't usually use iWeb for web design. I have Dreamweaver CS3, but I needed this site up asap, and the quickest way forward was to go with iWeb.
Are either of you able to help me set the margins to auto, on iWeb? - Or is this not physically possible using iWeb?

Thanks,
Arron

 

[Cabbit]

Thanks for your feedback.

I don't usually use iWeb for web design. I have Dreamweaver CS3, but I needed this site up asap, and the quickest way forward was to go with iWeb.
Are either of you able to help me set the margins to auto, on iWeb? - Or is this not physically possible using iWeb?

Thanks,
Arron

never used iWeb so your best be imo would be to edit the html files directly to have margin: 0 auto; to the container div.

 

[razorianfly]

never used iWeb so your best be imo would be to edit the html files directly to have margin: 0 auto; to the container div.

Thanks again for the help on this.

I've just uploaded the homepage with the changed margins.
Before changing all the pages, I need to know if it's worked.

Is the homepage alignment any better now?

 

[Shownarou]

Homepage alignment is fixed.

 

[razorianfly]

Awesome - see you guys/gals on the other side of perfect alignment, baby!

Thanks for testing it!

[Edit] - All page margins edited.

R-Fly

 

[Darth.Titan]

The words "good" and "lick" in the header on the homepage are practically invisible. White text on that light blue background doesn't have enough contrast to be read easily.

 

[design-is]

The words "good" and "lick" in the header on the homepage are practically invisible. White text on that light blue background doesn't have enough contrast to be read easily.

I have to agree - the text in that whole top sentence seems a little hazy. More contrast needed.

 

[razorianfly]

The words "good" and "lick" in the header on the homepage are practically invisible. White text on that light blue background doesn't have enough contrast to be read easily.

I have to agree - the text in that whole top sentence seems a little hazy. More contrast needed.

Thanks for the great advice. I was in two minds myself whether to keep it white myself.
Now changed.

R-Fly

 

[design-is]

Much easier to read

(Sorry to be a pain) Not sure how well the new colours tie in with the rest of the scheme though.

 

[razorianfly]

Much easier to read

(Sorry to be a pain) Not sure how well the new colours tie in with the rest of the scheme though.

Great!

Ok, I gather the colours clash a bit, but are we still liking the two colour idea for the two highlighted words?
or do we think I should stick with one gradient colour for the two words?

Somehow, I feel two colours seems to emphasize the sentence more, in a way.

[Edit] - For example, Do we like the colour combination in the attached?

R-Fly

 

[memco]

The site looks good, but the code leaves something to be desired. More importantly though, I find it kind of frustrating that text does not resize on your page. Make sure you use either % or em for font-size that way people who can't see well can resize it.

 

[tominated]

love the design, but if you are doing web design, i wouldn't be using iWeb. Use textmate of bbedit - not iweb

 

[ChicoWeb]

My only thing is with the code. If you disable styles, well, it doesn't look like there's much separation of structure and presentation.

 

[design-is]

To the above comments about bad code...

I don't usually use iWeb for web design. I have Dreamweaver CS3, but I needed this site up asap, and the quickest way forward was to go with iWeb.

He has already addressed this. I think he's just looking for critique on his design.


@ Rfly

I don't think those 2 colours fit with the rest of the page - they only seem to relate to the icons below. A different 2 colour combination may work.

I see you have just the 1 extra at the mo:

I think this works quite well.

 

[razorianfly]

To the above comments about bad code...



He has already addressed this. I think he's just looking for critique on his design.


@ Rfly

I don't think those 2 colours fit with the rest of the page - they only seem to relate to the icons below. A different 2 colour combination may work.

I see you have just the 1 extra at the mo:

I think this works quite well.

Thanks for all the feedback. I'm sticking with it as is, for the slogan. Glad you like it.
You are right, at this moment in time I am only looking for critique on the overall design and feel.

You'll also all probably be glad to know I'm striking web design off my services list (for the time being).
Your right, I need more experience and quality time with the coding.

As a result, the front page will soon be updated with two new services:

- Web Graphics
- Design for Print

With those, two new pages will come, as like the iPhone icons page,
explaining the service a bit more, and how I go about the design process.

Thanks guys,
Arron

 

[razorianfly]

Hey people!

After much deliberation I decided to completely remove the was 'navigation' made of images - apart form the page loading a couple of seconds slower,
I felt I wanted to jazz the site up in different, and couldn't as the navigation bar colour scheme was stopping me.

Now I've gone for a text based navigation bar, using a slightly darker blue for inactive, and black for rollover.
I think it works quite well, but If you could give you opinions on this change, that'd be great!

I'm looking to go into this in the big way, and hopefully this site will let me.
From now on, I'm an iPhone icon designer, while providing branching services off of this.

It's time to put my experience with graphic design over the past 7 years, to good use ...

R-Fly

 

[design-is]

I much prefer it now.

To combat the page load time issue, make sure you optimise all your images appropriately & look into learning to build the site with code rather than iWeb

There are a lot of tricks you can do to avoid splashing images everywhere for all your content.

 

[delude]

I much prefer it now.

To combat the page load time issue, make sure you optimise all your images appropriately & look into learning to build the site with code rather than iWeb

There are a lot of tricks you can do to avoid splashing images everywhere for all your content.

Hi, could you explain a little more about these tricks please?

 

[SrWebDeveloper]

I hope design-js (who I respect tremendously and love to read their replies) doesn't object if I offer a little insight into this:

Use a quality image editor that optimizes images. By this I mean when saving the image for web use, it will compress the image to a small a file size as possible. It will do things like remove redundant pixels, select the appropriate color palette, bit depth (use the least amount of colors). Use a graphics program that will let you preview different compression levels before you save the image.

There are plenty of online graphic optimizers such as this one.

Some basic rules to follow about image usage on the web:

1) If you can do it in text, don't use an image (i.e. for graphics other than logos and mastheads or other necessary uses for an image, use CSS and HTML to create the effect)

2) Always crop your images as small as possible, smaller images are always better, also always crop out unnecessary white space or background color

3) Reduce the bit depth to as low as possible until the image doesn't render the way you want it, i.e. for gif's even though it supports 256 colors doesn't mean your simple "alert" graphic needs all 256.

4) Blur the image slightly: JPEG compression likes images with few details, subtle color gradations, and few hard edges (not for everyone, but a cool trick, trust me, I use gausian blur all the time for borders/edges)

5) The two most commonly used image formats are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). GIFs are best for graphics that have few colors. JPEG is most useful for photographs and images that have complex color shadings.

6) PNG is excellent when used properly, i.e. don't forget MSIE 6 has a problem with Alpha transparency and PNG. This has been discussed on this forum many times. Always preview it in a browser before saving.

The object of image optimization is to reduce load time. Even with high bandwidth being so affordable and omnipresent these days - this is no excuse to curtail these simple rules.

You might always want to look into pre-loading your large images using simple JavaScript like this (add into head area and of course edit to use your actual image names and paths, example below is for 2 gif's):

<SCRIPT LANGUAGE = JAVASCRIPT>
<!--//
if (document.images) 
{
   img1 = new Image();
   img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
}
//-->
</SCRIPT>

-jim

ps: Folks, let's do our best not to get into silly diatribes about "this format is better than that" - the advice above is intended to be general audience for those who wish to learn the basics, which was the OP's request.

 

[delude]

I hope design-js (who I respect tremendously and love to read their replies) doesn't object if I offer a little insight into this...

Insert extremely helpful advice here.

Thank you so much! That was really helpful, and I will definitely be referring to it when I get a chance to experiment with my site.

 

[design-is]

I hope design-js (who I respect tremendously and love to read their replies)

Thanks Jim, means a lot to me Of course I don't mind you adding in at all!

That list is a great start.

I was also implying the use of CSS to create effects which allow you avoid using image. Also, logical, correct HTML coding and use of CSS will allow your site to be easily viewed and navigated without images or styles active.

One other way to pre-load images (that I don't think I've used, but still works) is to have them load as 1px by 1px at the bottom of your page and hide them with CSS. This means they are ready in the cache when the site needs them. Avoids using JavaScript.

One of the main uses for pre-loading seems to be for navigation buttons - which can also be achieved without JavaScript. I create 1 file containing images for all states and use CSS to determine which part of the image is visible for each - a:link, a:visited, a:hover and a:active.

Hope that helps too