From Print Design to Web Design
- 1. Georg Heeg eK Georg Heeg eK Baroper Str. 337 Wallstraße 22 44227 Dortmund 06366 Köthen Germany Germany Tel: +49-231-97599-0 Tel: +49-3496-214 328 Fax: +49-231-97599-20 Fax: +49-3496-214 712 Georg Heeg AG Seestraße 131 8027 Zürich Switzerland Email: georg@heeg.de 1 Tel: +41(848) 43 34 24 http://www.heeg.de
- 2. From Print Design to Web Design "Using Smalltalk to Connect both Worlds" Georg Heeg eK 2009 http://www.heeg.de Author: Roland Wagener roland@heeg.de 2
- 3. From Print Design to Web Design 1. What's the Problem? 2. So, lets build a bridge! 3. Now, lets build a product! 4. It currently looks like this 3
- 4. What's the Problem? Designers are artists with a special language They are thinking in colors, fonts and perfect images colors Asthetics and good taste are key to their success look at the results: – Brochures, Flyers, Posters, Magazines 4
- 5. We love to look at Them! But we look at paper, if we adore those results ... Most of the time On the web, we find those gems ransformed into PDF documents or Flash booklets So why is it that we don't look at some beautiful normal HTML-based web pages? 5
- 6. What Tools do they use? Photoshop, Illustrator, Freehand Pagemaker, Quark-Express, InDesign – They are all mainly targeting at print oriented output – None of them can export a web page • Ok, Photoshop can export an album site, but that's something different ... 6
- 7. ADOBE supports you ... 7
- 8. Designing for the Web? PDF Flash HTML 8
- 9. Designing for the Web II designers export graphic versions of their documents to web programmers The images are decomposed and arranged on a web page The results differ from the original 9
- 10. Designing for the Web III HTML and its limitations are exposed to the user and influence the design a lot – Can't use all fonts – Shouldn't use all colors – Images squeezed and compressed – Positioning can be fun ... – Learn CSS and you will win A nightmare for a professional designer 10
- 11. So what options do they have? InDesign© exports into two web compatible formats: PDF and Flash – The whole layout is preserved – It is a one-click operation – no tuning of the result necessary But end users are not always fond of PDF and Flash 11
- 12. PDF/Flash versus HTML PDF or Flash HTML – Proprietary file format – The web file format – Needs a browser plug- – All browsers support it in • They are optimized for • Plug-ins consume this additional plattform performance – Large files, all pages – Each page is separate are fetched in one go • Shorter load times per • Long download times page – May include fonts not – Simple to interface available on the clients with other web sites computer and web applications – Flash cannot embedd – Flash and other media flash can be embedded 12
- 13. So, lets build a bridge! Objectives: – designer can stay with the tools he knows well – No need to learn HTML or CSS – export of designer documents to HTML format Like this! 13
- 14. How did VisualWorks help us? Based on exports of InDesign CS4 – We used the XML frameworks, and build domain objects for each InDesign-page – various image operations are done using an external library to create PNG files – With seaBreeze providing a complete HTML object model, we were able to build a seaBreeze page for each InDesign page • The first prototype was shown to a customer after about two weeks 14
- 15. Image processing I We started using InkScape, an SVG based vector graphics application – Called from the command line – Available on all platforms (Win, Mac, Linux) – InkScape converts SVG into PNG files – http://www.inkscape.org/ 15
- 16. Image processing II This approach was very expensive – Starting up InkScape 100 to 1000 times for a conversion took too long – The command line call did not allow us to re-use a running InkScape And InkScape 0.46 created wrong images in certain complex transparency situations 16
- 17. Image Processing III An alternative was Batik, a Java SVG toolkit – We used JNIPort by Chris Uppall and Joachim Geidel to call it from VisualWorks – The performance improved dramatically • Java starts up just once, • subsequent calls are just very fast – Also available on all platforms – http://xmlgraphics.apache.org/batik/ 17
- 18. To have or Not to have A designer uses Fonts to attract attention Fonts are key to his work HTML does not allow to make use of fonts reliably – If a font is missing on the client machine, the text will be displayed a default one, like Times, Courier or Helvetica How can we help? 18
- 19. Display of Text export text as vector paths – This way, the font is used on the designers computer – The client doesn't know about the font at all However, text exported this way will become a PNG image in the web – we are able to attach the original text to the page, but it is not the same – The user has the choice here: • Content or Design 19
- 20. The Prototype A web application written in seaBreeze Our idea was to deploy the converter as a web based service – Pay-per-conversion – Pay-per-converted page – Pay-per project But users wanted a 'real' application, or even an InDesign Plug-In 20
- 21. Now, lets build a product From an engineering point of view 'We are finished, we can do it!' From a customer point of view, the solution of the converter as a web service was not acceptable! – No platform integration – No integration into InDesign – No internationalization A standalone MacOSX application is the next goal – Designers love the Mac – And the simpicity of usage 21
- 22. And so, we are in the process of Preparing a MacOSX application – Interface to the Application Menu – Support the platform help system – Support drag&drop of files – Open the browser on the resulting HTML pages – Inventing icons and herald screens – Writing marketing material – Find a pricing model – ... 22
- 23. Interface to the Mac-Menu Use the InterfaceBuilder and modify the original MainMenu.nib inside the visual.app/Contents/Resources folder, and put translated versions into the language project folders Use unique MenuItem-IDs but do not change the existing ones! 23
- 24. Two facets of Internationalization The Mac has one for Resources – Apple-Help is organized this way And VisualWorks has another one for MessageCatalogs – UIs based on UserMessages can use them, the interface to the location inside the .app-folder is via manual modifications 24
- 25. It currently looks like this 25
- 26. We are still not finished But we have high hopes! The preparation of the product took longer than the solution of the problem And the name will be: 26
- 27. Designing for the Web! PDF Flash HTML 27