Basic Web Design Tutorials for print designers

[justinwhall]

I have a print designer friend that needs a crash course in web design. There are a bazzilion web design tutorials out there but most of them are ver specific. As in they teach you how to “Make a great splash page” or “build a stunning 3d logo”

Looking for more of a best practices when creating PSD mockups. How to layer for your dev, dos and don’ts with things like bg images and basic specs (to match things like screen rez)

[nixnerd]

Make a great splash page

Who uses a splash page?

Looking for more of a best practices when creating PSD mockups

Who uses PSD mockups?

The absolute BEST advice I can give is… learn HTML5. It will take 1 day. Then, learn CSS. Try to make everything flexy/responsive, ideally build for the smallest screen first (lowest common denominator) and progressively enhance the page until you get to a max width of say 1250px.

Do as much as possible in CSS, use vectors (SVG) after that, then use photos… sparingly and with small file sizes.

Other than that… the sky is the limit. You’re only limited by your creativity. Ooops, I mean your ‘friend’ :)

[justinwhall]

Um, thanks. Wait, sorry, that was a not helpfull at all.

Who uses a splash page?

This is not the point. It was merely an example.

Who uses PSD mockups?

Wireframes > PSDs > Development. That’s how any agency or contractor worth of aptitude works.

As a developer, it’s pretty standard to receive a PSD from from the creative agency/designer/art director if not protocol.

The absolute BEST advice I can give is… learn HTML5 <snip>

Thanks, but I know it very well. I also took my training wheels of my bike last night. All grown up now I suppose.

Yes, it’s great if your designer knows the basics. At least a basic understanding of HTML and CSS makes are much better web designer. Understand javascrpts and the basic principles (and limitations) of DOM manipulation(s) even better! However, designers coming over from print need to start with leaning the basic principles of the web that are different than print.

[nixnerd]

Um, thanks. Wait, sorry, that was a not helpfull at all.

Take it easy Justin. Allow me to explain.

Wireframes > PSDs > Development

This is a workflow that needs to die quite frankly. That’s my opinion. However… it’s a fact that many, many web devs agree. We are in a renaissance of sorts in web, where things that always were… no longer are. The PSD phase will go the way of glass buttons, splash pages and web designers. See, it’s no longer enough to just be a designer… unless you work for some big magazine (the paper kind) or do in-house work for some company that just needs handouts for meetings or whatever.

More and more, people design in-browser… making them on some level a developer, in addition to being a designer. I would argue that they need to at least know some JS to be called a developer… but that’s my opinion. At the bare minimum… most designers are now ‘coders.’ Clearly your friend is aware of this on some level, since he/she is trying to bolster their web chops.

coming over from print need to start with leaning the basic principles of the web that are different than print.

Rrright… that’s why I said for your friend to learn HTML and CSS. If you don’t know those… I don’t know how you could possibly start learning JS on any level. JS and more specifically jQuery do one thing and one thing only… they manipulate HTML elements. If you don’t know that… you cannot learn anything else. Period. You need a chassis before you can drop an engine in a car.

On another note, I seriously have no idea why this is a controversial answer. Your friend thinks in print… he/she needs to learn to think in web. HTML + CSS will start the journey. And… there is no specific tutorial, as that will only limit your friend to someone else’s perspective on web.

I also took my training wheels of my bike last night.

This is another thing that is has gone the way of web 2.0. It’s all about that Strider bike bro.

But now I have to ask the question… why don’t you just teach your friend the basics of web?

[nixnerd]

Hey @justinwhall,

I sincerely apologize if I came off rude. I really wasn’t trying to be a dick. I get a bit uhhh dogmatic sometimes.

We really aren’t so different you know. You’re a Denver guy, I’m a Denver guy… plus, look at this coincidence. You tweeted this:

@justinwhall:
I want everything & don’t want to pay anything. I’d love to say something but the product they get is better justice.

about this:

http://denver.craigslist.org/cpg/4436612394.html

This is the actual email I wrote to these people:

Small world.

[chrisburton]

The absolute BEST advice I can give is… learn HTML5. It will take 1 day.

HTML5 takes more than one day to learn unless you’re talking about the very very basics.

If I can give any advice or help, Jessica Hische along with her husband, made a series of videos to help people in print. It’s called Don’t Fear the Internet which explains HTML and CSS to the point that a 1st grade student could understand. Honestly, I’m betting most people have learned by just diving in and researching problems as they go along.

[nixnerd]

unless you’re talking about the very very basics.

That’s more or less what I was saying… but even intermediate HTML5 can be learned in no more than two I believe. Think about how you code a page… the VAST majority of what we use isn’t super exotic HTML. It’s semantic markup, with a few classes and ids. That’s it. Then comes the infinitely more fun part… CSS + JS + Your backend language of choice.

In all honesty, you can be coding meaningful Python utilities in like a week. HTML5 is a 1-2 day thing for 80% of what you’ll ever use.

For fun:

[chrisburton]

but even intermediate HTML5 can be learned in no more than two I believe.

You have to remember that attributes come into play and not just elements. Also, not all browsers are compliant so that takes a learning curve as well. This is usually the case for CSS. Once you learn those things, sure, it seems simple enough but just remember when you were first starting out how everything seemed so complicated (e.g. what to use, what not to use, what to do, what not to do, etc).

[nixnerd]

I guess you’re right. And it’s probably better to gain a really solid foundation (by that I mean a thorough understanding) before you move on. So… make it a week or two :)

[chrisburton]

I guess you’re right.

It’s not about being right but rather my opinion.

And it’s probably better to gain a really solid foundation (by that I mean a thorough understanding) before you move on.

Sure, if you’re going to be applying for employment in this area for a career. In my case, I was learning by doing basic things and then progressively as I understood what I was doing, moved on to other areas. But that does not mean I didn’t have to come back to learn more about HTML or CSS because I certainly did. You learn by experimenting.

So… make it a week or two :)

Ahaha. Simply put, I wouldn’t place a time on how long it takes to teach yourself. Everyone learns at their own pace.

[nixnerd]

But that does not mean I didn’t have to come back to learn more about HTML or CSS because I certainly did.

It’s funny you say that because I’ve been doing more back-end stuff lately, along with some bash scripting and CSS is a different beast. It’s really simple in the way its constructed… with ENDLESS options. You can never get to the end of CSS. I like CSS and SCSS so much… I’ve been doing light graphical work with it as of late.

[chrisburton]

I like CSS and SCSS so much

What did you just say? I will forever hate CSS. It is the most boring language that I wish would just die. Thankfully someone introduced Sass which makes it less of a pain but I still hate it.

[nixnerd]

Ha ha ha ha ha ha ha! SCSS makes it pretty awesome but dude… I seriously love CSS. I think it’s limitations are what make it fun. It’s really fun for me to find new ways to use it… ways in which it wasn’t necessarily intended to be used. Like this:

I’ve been doing light graphical work with it as of late.

I personally feel that it’s so much easier to just start coding a simple layout than to open Photoshop or GIMP.

Vector software I could never live without. Ha ha ha, then again, I use the raw XML to manipulate it with CSS! I absolutely love it.

[chrisburton]

Your enthusiasm for CSS is what I have for PHP. Although, PHP can be a total snob to me sometimes. I love trying to construct the logic of what I want to do but again, it can be a snob to me.

[nixnerd]

Dude… better you than me. I have nothing but disdain for PHP. I use it because I have to but I really, really dislike it. We’re exactly the opposite.

[Author]

Posts