Print to web design

[jcibere]

My background is from the advertising print side. What is the best way to transition to the web from a designers perspective. I'm very used to page layout programs and Illustrator etc. Would like to do it WYSIWYG of course but... Thanks everyone for your advice and insight.

[Nadia P]

the most important factor would be to understand that a print layout is not the same as web layout ;-)

I would firstly learn basic html and css before tackling any web design work - doesn't matter which program you use to code your pages, you will need an understanding of the underlying code so that you can troubleshoot problems as you encounter them.

Nadia

[ablaye]

You can use Frontpage or Dreamweaver for a start. They are WYSIWYG programs that you can use to get you started with web design.

[spikeZ]

Go with Dreamweaver for programming until you have learned enough to understand what is happening and why. Then use the vast online resources to start doing it for yourself

[bluedreamer]

the most important factor would be to understand that a print layout is not the same as web layout ;-)
Nadia

That is the most important thing to remember!

My advice is to learn HTML and CSS first.

Learn to build a nice looking page using no images - just use text and use CSS for styling/colours and headings - when you have got a good idea of how this works start adding images to your page, ie a logo,a nd build up from there.

Experiment with fixed width pages and fluid (100% width) pages, on different screen resolutions and in different web browsers - this will give you an idea of how web pages and html behaves and will give you an insight with creating your graphics.

Tip of the day : KISS - Keep It Simple Stupid

[Brad080283]

As said by the others print design differs greatly from web design. Web design has so many more factors to take into consideration. Every choice you make may effect the functionality and usefulness of other parts of your design. The design of navigation can be a science in its self. Not to discourage you at all! Practice makes perfect and we all started right where you are.

Learn basic html. It has a very easy learning curve. Then I would start on CSS. WYSIWYG editors are nice but if you get a problem in your code, and you will (we all do), your gonna have to dig through some code to figure out whats wrong, and knowing what all that code does makes it 100 times easier.

Read all the articles you can on web design and such. Combine everything you learn and you will be knocking out some killer pages before you know it. Good luck!

[nukeemusn]

Don't go straight for WYSIWYG, becasue mnost of them spit out garbage code anyway. REally dig in and learn CSS and HTML before you do anything. Sitepoint has a lot of good boks on those subjects.

Also, remember that print and web are NOT the same by any means. In a print layout, Navigation doesn't exist, for one. Also a lot of corporations have style rules taht determine page margins and such in documents, and will try to push these on a web designer. This is not a good idea, because a .5 inch top margin on a web page equates to a lot of lost screen real estate.

Jsut a few things to think about.

[sonjay]

Burn it into your brain: print layout is not web layout. Some specifics:

• Users won't view your page at the same size that you used for designing -- browser window sizes are all over the board.
• Users won't necessarily see the pretty fonts you so carefully chose.
• Users won't have their monitors color-calibrated, and the PMS colors in your official corporate logo may look really weird to them.
• Using nice large photos is a big trade-off on the web -- download times, which isn't even a consideration in print.
• Some users (including search engines) won't see all the gorgeous graphics you worked so long and hard to create.
• Users can re-size fonts.
• Users can disable style sheets.
• The web is not linear -- people can (and will) enter your site at virtually any point, leave at any point, and will jump around in ways you never envisioned.

You need to develop the mindset of web site design, which is a very different animal from print design, and you need to understand how code works, how pages are structured, how browsers render code, and myriad other things that don't exist for print design.

You might feel it's limiting, and in ways it is, but on the upside, if you find a typo in a brochure that just finished a press run of 5 million copies, it's a major disaster. On the web, you just log in and fix it.

You have tremendous flexibility on the web that doesn't exist in print, but you need a solid understanding of html, css, graphic optimization, how search engines and text-only browsers work, site navigation and user behavior, the many configuration differences in systems and browsers that can affect how your site looks and behaves, and many other factors.

[Tyssen]

Sonjay's made some good points which can kinda be summarised by saying you'll need to learn to compromise a lot more with web design than you may be used to as a print designer.

[Blue Sky]

well so as not to add to the good stuff above you can try out some free stuff to help you on your way such a NVU, or some of the free text editors etc. You will need to find out if you have an aptitude for hand coding or if you work better in a wysiwyg environment. Either way if you learn basic HTML and CSS you will never regret it.

[conradical]

You are in a good place. All have posted good ways to build your site.

I would say, continue with Illustrator to layout your website like it were a brochure and then figure out how to convert that into a web page.

If you straight off jump into web design you will be just another designer who designs "web layouts" - nothing special. You design according to how well you know how to translate that design into code - Header at the top and content below!

I'd say, have that print designer in you contribute to the layout and not discard that part at all. Then use the CSS and HTML tools to translate that into a web page.

You will soon learn to balance all the hats.

[jcibere]

Thanks to everyone...