Designing website template - video

[Berokka]

Hi

I have been freelance designing for couple years and going "pro" this year. Means Im starting a company.

I made a timelapse video of making web design template with photoshop. I would like to know what do you think?

http://www.youtube.com/watch?v=OaXVGpg42Dc

- Berokka

 

[Fireproofgfx]

I think it is a great timelapse video. Simple design yet very nice looking! I picked up some cool techniques like adding the rounded drop shadow to the slide show image area. Good job.

 

[MacK]

Neat video.

 

[mjrzasa]

That was awesome. I'd like to be able to see some techniques more in depth as well. I'm curious, do you just design or can you actually develop everything you designed into code and make get the website set up, or what do you do?

 

[Phreaddee]

Interesting video, yet it still confuses me, to this day, why you need to “design“ a site in ps in the first place. Isn't that essentially double handling?

Surely it makes more sense to scribble out a basic design on paper (5min)
Something like “ok we have a header and footer full width. (dark grey) Simple nav under the header, centred content in a wrapper. Lets put under that a slideshow, Then two columns of content, followed by another section, maybe a hero shot from a gallery, and a bit of a live feed from our blog, facebook, et al“
Probably take even less than 5min.

Then jump into your editor of choice, pump out a basic html wireframe, and a rudimentary css. Prob 15-20min top.

All that fluffing and modifying and “styling“ that you did with ps, do so with your css.
You'll only need to go into photoshop to resize your images for the slideshow (which by now you would have the scripts for to implement, and know exact sizes of, so unlike ps comps would actually function and not be static) logo and any other assorted assets.
By lunchtime you'll have a pretty sweet template, which you can then show your client, or implement straight away into your cms of choice.

Before css was any good, sure, but nowadays you can do all you did in ps with css alone...
It just seems such an old technique to me.

 

[mjrzasa]

I'm pretty new, but to me it is much easier to make changes in PS/Fireworks and see how it'll look compared to HTML/CSS and you can just cut and save the images and use them for the page instead of having to do a ton of CSS for each thing. I do not know if that is correct way to do things, but that's what I thought.

Also, would you really be able to do all the code for that in 15 min?

 

[Phreaddee]

you can just cut and save the images and use them for the page instead of having to do a ton of CSS for each thing.

Yeah thats a pretty lazy way to do it, not to mention the slice to html feature in ps outputs horrendous code (hoping u dont use that) but really cannot see how for instance if you had a large layout and had sliced it in ps, showed the client, who loved it but wanted the bg a drastically different colour, that going back to ps, changing the background, reslicing, and reloading all the images is “easier“ than just changing background-color:#666; instant . Or if thats too much #999; instant. Personally id prefer to make a site with a “ton of css“ that is infinitely flexible and no images, over basic, autogenerated css and a “ton of images“ inflexible slow loading and well like a site from the late 90s...learn css inside out for your own good.

Also, would you really be able to do all the code for that in 15 min?

I did say a wireframe and rudimentary css, but yes, without all the bells and whistles...its a pretty simplistic layout.

 

[Fireproofgfx]

Phreaddee, I always love your input on this forum, you are always correct and you are very knowledgeable.

I myself haven't learned all of the ins and outs of using CSS to do the things this gentleman was doing in PS, so I to design everything in PS (I do not slice it up though). I hope to one day be able to do it like you stated on first comment.

 

[Phreaddee]

Haha, thanks man, altho i wouldnt say always correct! Im still learning too...
Have had many put me in my place before, i can tell you now!
All it takes is learning and practice, every day, and once youve built enough sites the html structure is the easy bit. You can usually just look at a layout and have a pretty good guess of how it will/should/could be structured. Css is the killer, deceptively simple to begin with, but can get very tricky...
12months of solid work and youll be fine...

 

[mjrzasa]

So you really think it is bad practice to use Fireworks and Fillet a nave bar to make it round then save the nav bar and insert it in html as:

.navbg {margin:0 auto 0 auto;background-image:url('images/navbar.png');width:770px;height:50px;}
.nav {font-family:KodchiangUPC;font-size:40px;}

<div class="navbg">
<div class="nav">
<ul>
<li><a href="index.htm">home</a>
<li><a href="aboutus.htm">about us</a>
<li><a href="properties.htm">properties</a>
<li><a href="contactus.htm">contact us</a>
</ul>
</div>
</div>

Rather than going into css and doing something like:

.nav {margin:0 auto 0 auto;width:770px;height:50px;;font-family:KodchiangUPC;font-size:40px;}

<div style="background-color:#666;border-radius:5px;">
<ul>
<li><a href="index.htm">home</a>
<li><a href="aboutus.htm">about us</a>
<li><a href="properties.htm">properties</a>
<li><a href="contactus.htm">contact us</a>
</ul>
</div>

EDIT: Do you think if someone were to design a site in all CSS and same thing in all images, would you be able to tell a difference? In Load time? Will Images all be the same/complete with CSS?

 

[Phreaddee]

I wouldnt say that its “bad practice“ to do so, it is a perfectly valid way of doing it, but css support is ever increasing and yes i personally would use border-radius over a background image.
And css only site would load faster, a very thorough, in depth css file would still be less than half of your average header image (in kb).
And to tell between the two. Ctrl+ as far as you can. Check out the border-radius v ps corners. The image will (obviously) be pixelated. Border-radius on the other hand, smooth as...same goes for text as images v live text, etc etc.

Oh and as for your example, you dont even need the div around the ul, just target the ul.

 

[benjamin.morgan]

Yes there would be a big difference in load time, depending on how many images. Also what if the images cannot load? Then you have have your site showing up and it looks like crap. Always better to be on the safe side.