At Flying Hippo , my role is to create websites. Since I often create websites from start to finish, I take on the responsibilities of a designer, production artist and developer—effectively a whole team of people.
Finding tools that make everyone happy is like finding a minivan that can crush the competition in a drag race and get four kids to soccer practice on time. Luckily, I have one. Take a look at the Venn diagram on the right for more about that. No single program answers every need perfectly, but using InDesign for web design usually suits my needs best. I can then use that file as my own reference or send it along to the web developer.
You can always get your colors right in Illustrator or on Kuler , then export the color palette to InDesign. Is it possible to design the whole website with Indesign and exporting it to Dreamweaver to put in the links and functions? Using InDesign to design a website? Using a cement mixer and a bunsen burner to bake a cake?
Sorry, let me try to explain a bit. Nice scalable resolution indifferent vectors are not helpful. You want to be able to happily load the mockup into Photoshop or Fireworks to do the slicing and be guaranteed that what you see is what was intended, with nice layers for rollovers etc.
How do I do that? What file format do I save them as? Thanks a million. Gentlemen, please make yourselves at home. I apologise for ignoring your conversation. I will jump into it over the break … just trying to wrap up a few work-related projects before the holidays.
The strength of using Indesign would clearly be the ability to brainstorm and try lots of ideas quickly. Of course your pixels are in the right place in PSD files, but even in CS4 as an expert user it is clunky to quickly change graphic elements.
Re-building some graphics in PS is an extra step, but if it can be done only once that would be an overall saver of time and the creative process might be more creative. Point taken about the prototyping speed. Designs built with InDesign are, as Jerome pointed out, quite difficult to build a website from. InDesign is vector-based, and tends to produce elements such as lines, boxes, etc.
InDesign files are often no layered, which requires tedious work to produce things like background images and button effects. My experience with Illustrator files is mixed, and in some cases Illustrator files are just difficult as InDesign files to work with. The ease and accuracy of building web pages from Illustrator seems to depend upon how the Illustrator file was created.
I have found properly layered Photoshop files to be the easiest and most accurate medium for converting a design into a web site. Unfortunately the Photoshop file winds up being extensively edited on each revision of the design.
Interesting discussion. My team and I go around in circles about this. I think, what it actually comes down to, is what the designer is most comfortable with, from a technical sense.
If you can clearly define your ideas, a good dev should be able to interpret without too much fuss. I just assume there will be some slipping of design as an idea becomes live content. My coworker tends to work in inDesign, but then follows up with photoshop.
If inDesign or for that matter illustrator had a really clean xhtml export scenario, this might be a moot point. But as is use both programs alike i see much more benefits when working with ID: for example text can be much more easily changed or formatted.
I found this article and responses fascinating. I work in a design studio that has a mixture of Print Designers and Screen Designers…the Print Designers always note the problems they have when they have to pick up and amend in a file created in Photoshop and are always saying that websites should be laid up in InDesign instead. Try 1. Then open in Dreamweaver. I currently use InDesign to layout web pages. I also do the coding Espresso and CSSedit. My workflow may seem a bit odd and even cumbersome, but I am both a print primarily and web designer.
One major goal is to reuse print content layout, not just media for the web — cross-media exploitation as it were. To see how increasing the font size by 1px would affect the general layout would be easy in CSS — font-sizepx. It will then reflow all the text, a bit like a browser would. In Photoshop I have to change 40 or 50 layers, which will take the best part of an hour. No thanks.
You should use a screwdriver to cut down a tree — use an axe or a saw!!! Use photoshop or fireworks to design websites. Use inDesign for making print! The article and comments are about how people might leverage this tool InDesign to allow for cross-media publishing.
I would say it is more like using a bulldozer to cut down a tree. It could be overkill, more clumsy and not provide the finesse of a chainsaw, but it is fast and effective. My thoughts, as a designer who regularly cross-publishes content. Indesign is great for print. What I would like to know what the best steps to follow to make a simple website to show pictures and PDFs.
If you made a master page. And then cloned off a bunch of copies to place the pics and layout the text. Then what would you save those collections of pages to finish building the links and then publish to an IIS web server.
Flash is not the answer. I saw the new flash program for CS5 and really helps create swf or flash files by people that do not know how to code. Flash is not what it hopes to be. I feel web coders and not designers needs to stressed. Coders are programmers and not designers. Style and design should be done by pros and coders should be specialists. So there needs to be a way for both to work well together.
I read here that indesign to Photoshop to the coders application of choice like dreamweaver or a Microsoft one is the best fit. But I am not sure someone can show that workflow here. Great messages but could you please put up instructions onto how to create a website layout in indesign.
Its been over a year since this was originally posted!! Look forward to your further comments. I think Sarah was looking for more of a case study example of how someone might use InDesign for webpage layout. Sarah: below are some references you might find helpful.
If so is there any point in leading or kerning type and carefully positioning boxes on the page in indesign? Giving Indesign pdf to a coder is great, because it takes me at least 3 — 6 times as long to translate to a website as it would with illustrator or Photoshop.
You need a good structured layered document that allows pixel perfect measurements, rasterized images and web safe fonts in the content. And here I go digging this up again. You can link images. Also, the way vector objects are handled is pretty bad, too. Export page as an. Open file in Firworks. Then off to Dreamweaver for coding. Good design is good design but you will still need to write code in Dreamweaver. I have read the arguments between photoshop and indesign. I still dont see a real difference if all your doing is the layout of the website, besides for ease of making the layout.
What I want to know is that after designing the website in Indesign how do tell the programmer where things should be placed in terms of pixels, font size in terms of pixels instead of points, leading converting to line spacing. I believe you can use any program as long as you can describe all the details to a programmer. I may be wrong and really need to learn how to convert the layout I made to terms that a programmer can use to code the website.
For the keeping-true-to-the pixel i also would prefer PS or Fireworks as the tool to work with, but for mockups ID is my first choice.
And for all PS-User: Keep in mind, that ID ist the newest programm in the CS family, is uses masterpages and libraries — better than any other cs program. Then convert your points directly to pixels in web design. OR you can export a JPG for each page at 72 dpi and get an point for pixel actual size reproduction.
I checked and Indesign cs5 offers everything to be done in pixels. I started to use pixels when designing so all that is almost solved. For editing, you have:.
If you build a website on the Bootstrap framework, it will be responsive and compatible with all devices and browsers. Sofa is one of the modern minimalistic InDesign website templates for different purposes. You can use it for a website of the interior or furniture design company.
You can add eCommerce functionality and turn it into an online store. Apart from that, there are three pre-made blog templates and gallery scripts Accordion, Carousel, Slider, Isotope, Grid.
There are also web forms contact, newsletter, and search. There is also a drop-down menu. Still, if you have some technical skills, you can upgrade a standard menu to a CSS Hamburger menu , for instance. The next item in the collection of the website wireframes templates suits websites for furniture, flooring, and interior design companies. Blog, Gallery, and About Us.
You can fill these pages with working web forms contact, newsletter, search , UI elements and blocks, CSS3 animations and transitions, buttons, tabs, and more. To make a website look stunning, you can pick up a splendid header and footer from a rich collection and add Parallax. If you are looking for a minimalistic Adobe InDesign website template, DePaletra might be the right choice.
A laconic Japanese style and a concise color scheme with white, grey, and yellow colors help you to highlight important information. A rich UI kit helps to organize information conveniently. High-quality CSS3 animation and transitions can add dynamics to the page.
Besides, the developers optimized a template for SEO. It means that a future website has all the chances to appear on the first pages of the search results.
0コメント