7 Replies Latest reply on Jun 6, 2010 7:47 AM by JETalmage

    Uncoded design

    princesseyez70

      I need to know how to design a homepage without using code. Can I  still design all the normal navigation and image links and such without  coding it? I'm pretty new at this and I need some good advice about  this. Thank you.

        • 1. Re: Uncoded design
          colling_s Level 2

          You can use the AI- FC (Flash Catalyst- introduced in CS5) combination.

          • 2. Re: Uncoded design
            Monika Gause Adobe Community Professional & MVP

            Designing websites without coding is only recommended during early project stages. If you want it to work "live" on the web (i.e. be found by search engines, work in different browsers and devices) you should just bite the bullet and learn HTML/CSS.

             

            For presentations and mock-ups try Fireworks.

            • 3. Re: Uncoded design
              YKCreativeArts Level 2

              Its matter of interest that people want to write code or not. Yes! HTML is also way to create websites, but not the only way. AICS5/PSCS5 with Flash Catalyst provides an amazing capability of creating interactive applications without writing piece of code. People are doing amazing things with this combination and creating very beautiful websites. Here is one of the threads for product Flash Catalyst, where user has shared link of his site. http://forums.adobe.com/message/2864112#2864112

              You may want to explore this and similar threads alongwith various tutorials on Adobe TV for more exposure to AI-FC capabilities.

              • 4. Re: Uncoded design
                Mylenium Most Valuable Participant

                I need to know how to design a homepage without using code.

                 

                Then quit while you're ahead! Sorry if that hurts, but web design thrives on structure, navigation and accessibility etc., not on graphical fancy. Yes, websites can look graphically interesting, but don't you think it's more important people actually are able to use them? Function always comes first! If you can't be bothered with code and learning HTML/ CSS, then just leave it be. You only will fail miserably and produce rubbish web content that nobody will enjoy nor search engines and users will even find. Creating functional websites without learning the underlying mechanics is simply not possible and if you thought you could whip up a page just by clicking together a few elements in a graphics app, then you were wrong... Download Dreamweaver and study some basic HTML/ CSS tutorials, then build your site with teh proper tools.

                 

                Mylenium

                • 5. Re: Uncoded design
                  [scott] Level 6

                  Hire someone to build your site based on your designed Ai file.

                   

                  You can't create effective web content without understanding code.

                  • 6. Re: Uncoded design
                    davidmacy Adobe Employee

                    A couple of the responses to this question suggested using Flash Catalyst, so I wanted to give some information on what Flash Catalyst is good for, and what it is not. The main Flash Catalyst page on http://www.adobe.com/products/flashcatalyst/ highlights this pretty well - Flash Catalyst is an interaction design tool that is great for creating microsites, pitching ideas and presenting portfolios. Of course this is not all it can do, but these examples are a good way to discuss what can be done "without code" and where you'll run into barriers.

                     

                    Create a Microsite - a microsite is not a full website, it is an "individual web page or cluster of pages which are meant to function as an auxiliary supplement to a primary website" ( http://en.wikipedia.org/wiki/Microsite ). Microsites can focus on presenting information or design without needing to be tied into databases, e-commerce and a lot of the other infrastructure of the main site that they reside on.

                     

                    Pitch an Idea - designers often need to create presentations to get their clients to buy in to a concept. This may be an idea for a website, or for any other kind of design. Flash Catalyst makes it easy to bring in graphics from Illustrator and Photoshop, as well as videos and animation, and to create interactive experiences for the client to go through. Even when the idea is for a website, the work produced by Flash Catalyst would usually be considered as a mock-up that will be handed to a developer for further coding or complete implementation depending on the target output. If the final product will be Flash content to go onto a site or an AIR app to be installed on a computer, the developer might use Flash Builder which can directly open the Flash Catalyst project as a starting point. If the final product will be an HTML based site then the developer may re-write the entire thing in Dreamweaver or another tool but us the Flash Catalyst project as a spec for all of the interactions and transitions.

                     

                    Present a Portfolio - portfolio sites are mostly concerned with visual presentation. Showing the original product in its best light and providing an entertaining and immersive experience for the user are key. The content may be a series of videos or paintings, graphics, or even consumer products, but the presentation of content is the most important thing.

                     

                    As you can see, there are a lot of interesting things that you can do in Flash Catalyst without writing code, but please don't think of it as an all purpose web-design tool. Of course one of the big distinctions here is that the content generated by Flash Catalyst will either be packaged as an AIR application which is installed onto a computer or mobile device, or to view it in a browser the browser will have to need to have a Flash Player plugin. This is a topic of quite a but of conversation these days, but that is probably best left to another venue.

                     

                     

                    • 7. Re: Uncoded design
                      JETalmage Level 6

                      Egads. Princesseyez70 simply said she wants to make a few web pages with ordinary functioning hyperlinks without having to write code. Isn't it a fair assumption she neither needs back-end database functionality nor wants to get into all the esoterica of Flash, Dreamweaver, or whatever? As I read the post, it's a simple question: Can an Illustrator file be saved as a basic, but functional web page?

                       

                      Princess,

                       

                      I hope all this high-falootin' techno-pontification hasn't scared you off.

                       

                      Yes, you can export a web page (an HTML file) from Illustrator that looks like your Illustrator document without having to write code, using the Save For Web & Devices command. But if that's all you do, Illustrator will simply:

                       

                      • Export your artwork in one "chunk" in whichever of several web-centric formats that you choose. This will either be a raster image file (JPEG, GIF, or PNG) or one of two web-compatible formats that can contain vector objects (SWF or SVG). This will be written to a folder on your hard disk at the location you specify. It will be put in a folder named Images.

                       

                      • Write a bare-bones-basic HTML document that contains the necessary reference to the above-mentioned image (or SWF or SVG) file. This file will be written to your hard disk at the same directory location as the Images folder.

                       

                      Both the Images folder and the HTML document then have to be uploaded to your web host's server. When someone enters the web address of your HTML file, the HTML file is read into the visitor's web browser, and the content is displayed.

                       

                      Now...

                      That's as basic as it gets. You've just got an HTLM page that serves as a "web container" to essentially display an image of your Illustrator drawing. In order to create hyperlink buttons, you would involve what Illustrator calls 'Slices.' Slices is nothing but Illustrator's "me, too" interface for creating the very common HTML construct known as a table. An html table is just a (rather outdated) way to divide a web page into several rectangular regions (cells), each of which serves as a container for text, and/or graphics.

                       

                      After dividing your design into Slices, you can then assign basic web-centric functionality to each Slice (cell) individually. So, for example, you can select one of the Slices and set it to contain a link to another web page. Its image then acts like a button after the document is exported (Save For Web) as a web page. You do have to "code" in a sense, in that you have to key in the desitnation web address (URL). That is to say, there is no drag & drop interface for assigning the URL; but that's nothing to be afraid of.

                       

                      When an AI file containing Slices is Saved For Web, AI basically creates one big raster image of your file and then chops up that raster image into a set of smaller raster images which correspond to the Slices (table cells). The resulting HTML file contains the code for the table and the necessary references to the images and URLs.

                       

                      The online Help describes how to do all that. Look up Slices and Save For Web.

                       

                      So there's your answer from the context of using Illustrator alone. The functionality is bare-bones basic. The result is lowest-common-denominator stuff. The interface--even though it isolates you from having to write HTML code--is still cumbersome and tedious, and the functionality is quite limited.

                       

                      Like everyone else here so far, I also do not recommend your using Illustrator for this.

                       

                      I would strongly recommend your taking a look at Xara Web Designer 6. This $49 program is based on the vector drawing program, Xara Xtreme. It is built specifically for people like you, who simply want a no-fuss way to turn the design on their screen into a usefully-functional web page or basic web site. This program is arguably one of the best software bargains in existence. It contains everything you need for what you have described in a very unintimidating interface. It's got the drawing and effects and text tools you need. It can do much more in the sense of web-object creation and functionality than Illustrator, including interactive rollover buttons, scrolling text, menus, "pop-out images," etc., etc. It comes with a large collection of pre-built customizable web site tempates. It can import reasonable AI files on par with most other drawing programs. It provides a built-in FTP client, so it can upload your files and routine updates to your web server for you with a couple of clicks.

                       

                      And I dare say that if you have at least a working knowledge of Illustrator, you can learn the intuitive interface in as little time (possibly less) than it will take you to get comfortable with Illustrator's Slices features and tools. You can quite likely have a decent-looking web site operating in a day. This is not the kind of learning curve involved in a program like Dreamweaver (nor the expense). It can be thought of as a modernized version of the early WYSIWYG web design programs (PageMill, etc.) married to a surprisingly capable vector drawing program.

                       

                      It's not a cheezy toy. It's a purpose-built, very practical and useful tool for countless people just like you who are not interested in web coding but who simply want to quickly and easily build decently-functional web pages in WYSIWYG fashion, and then get back to their day jobs.

                       

                      And its output is not garbage. Rather than base everything upon dumb tables, it writes XHTML-compliant "divisions" which provide far greater functionality.

                       

                      Just so you know, this recommendation is from someone who:

                       

                      • Is not afraid to write his own XHTML code from scratch. (My little AI Javascripts site was actually a web-design class assignment, written entirely in a plain text editor).
                      • Has Creative Suite Master Collection at his disposal, and has owned and used most every WYSIWYG web-page program (Dreamweaver, et al) since PageMill 1.0.
                      • Is a fair-to-middlin' FileMaker Pro (database) developer.
                      • Monkeys with writing Javascript for AI and Acrobat.
                      • Creates Flash-based standalone applications (technical illustrations) with interactivity hand-coded in ActionScript.
                      • Is a life-long illustrator and fairly accomplished Illustrator user.

                       

                      Spend the $49. You'll be glad you did. It's just what you're looking for.

                       

                      JET