Web Mockups

Can anyone tell me if there are any benefits in using inDesign to create mockups of pages for a pre-existing website? Currently we use photoshop to do all of our web layout, but I've recently been told this is wrong and I should be using inDesign as it's a layout tool. I was under the impression inDesign was purely print (which we rarely do) so had never touched on it for website layouts.
Oh, also all of our code is hand crafted, so I will NOT be using any code that photoshop or inDesign produces, I need it purely for a layout tool which will then save to PDF/JPG.
any help/ideas are appreciated.

Great post on it here
Check out the comment http://indesignsecrets.com/indesign-for-interactive-design-wireframing.php#comment-475222
for a 90 minute video !

Similar Messages

  • Using CS6 for web mockup creation? Tips on how-to's

    Hi
    Pretty new to Photoshop and running CS6.
    I'm looking for a workflow to create web mock-ups in the most efficient and easy way.
    What Im looking for is to take an existing web frontend page and tweek it with new sections and components like buttons/menus/new text areas,images etc etc....
    are there any specific tools or "web galleries" to use for this purpose that I can incorporate into CS6....not really sure how to form this question in the right way but I hope this sort of exaplined my purpose....creation of good-looking web page design (even if it will jsut be in .psd format)
    Any help, tips & tricks would be appreciated.
    Thanks!
    //Helmut

    A web gallery is many web pages you need more then a layered template psd. Templates are more suited for Collages rather then web Galleries.  In the bridge output module there are some caned web galleries provided by Adobe there just not very good or a not easy to customize.
    There are many web gallery creation tools available on the web some free other cost. If you do a search you will find many. Some use Photoshop in the process they are Photoshop Scripts. Most have some options to customize some features. None that I know of give you complete freedom to create whatever you want. They support their web gallery designs where you can customize features within the designs.

  • Can't change image size % in save for web

    Hello,
    I'm using Photoshop CC. When slicing a web mockup, and saving for web, the image percent is blocked at 58.49% and I am not able to increase it to 100%. So my original image of 1024px wide comes out at 600px
    I haven't changed any settings (that I know of) and do not have this problem on any other mockup files I have. What setting do I need to adjust in order to save for web my slices at 100%?
    Thanks!

    I worked out what the issue was, my document height was over 8000px tall which is causing the issue, even though my slices are less than 2000px tall. When I temporarily crop the document to below 7000px, I can save out the slices at 100%. Annoying work around.
    It seems a bit random.

  • Is there a way to edit text in a smart object brought in from illustrator?

    Is there a way to edit text in a smart object brought in from illustrator? Many thanks for the help!
    And can anyone recommend learning resources for someone (me) who is an AI user for a decade who needs to work in PS for web mockups? Something other than a basic PS tutorial. Something geared towards that specific task. I'm not a PS beginner - but have mostly used it for photo correction until now.
    Truly -- thanks! BTW - I'm in the CS 6 Suite and CC will not be available to me.

    OMG! When I went back into the ai file and made sure that the text was on it's own layer (which I had not originally done) I could indeed edit the text in the file when exported to ps! This is a perfect solution for this situation. As far as the person I'm working with  - who fears ai more than anything - I can work in ai - which in many ways is so much less cumbersome than ps - and just export - clicking "preserve" layers & text editing! I hope this helps someone else! Sisham - many thanks for your help!

  • Unable to see a font in Adobe Type Kit from within Adobe Muse

    While I am able to install a font, Fertigo Pro from Adobe Type Kit, am unable to see the same font in Adobe Type Kit from within Adobe Muse.

    Unfortunately, that is not the case. From http://help.typekit.com/customer/portal/articles/1189216-introduction-to-desktop-fonts-fro m-typekit: You are now able to sync fonts from Typekit to your desktop via Adobe Creative Cloud and use them in all your applications for web mockups, print design, word processing, and more.
    Using of a font for web mockups is not the same as using it as a web font on a live website. The two uses are covered by different font licenses.
    You can use a desktop synced font in Muse as a system font and export it as an image. But to use a Typekit web font in Muse is not currently supported (though you can try the Muse Insider workflow referred to in the other forum post I mentioned above).
    Hope this clarifies things a bit.
    Abhishek

  • Illustrator CS4 exporting images with subtle grid overlaye

    I've run in to a rather troubling issue where Illustrator seems to be exporting images with a very subtle white grid overlay.
    The raw images do not have this grid, neither do the images as viewed in Illustrator.
    The grid appears when exporting as .png and .jpg in a variety of resolutions.
    Any ideas what's going on or how to remedy?

    The images were part of a web mockup that was created in AI.
    "Save for Web" did not change the outcome.
    I defaulted to Photoshop, which fixed my immediate problem.. but still does not answer my question as to why this is now happening when I have completed this process trouble-free numerous times before.

  • Color changes when pasting from Illustrator to Photoshop

    I have set both PS and Illustrator (both latest versions) to "North America Web/Internet".
    Both documents are RGB and have the sRGB IEC61966-1 profile.
    When I copy a square in Illustrator and paste it into PS
    RGB 19,78,110 (the color in Illustrator) changes to RGB 18,78,109.
    It doesn't matter whether I paste it as pixel, smart object or shape layer. The sampled color differs from that in Illustrator.
    Doesn't anyone have a solution to this?
    It's really unnerving when you do web mockups in Illustrator and then copy/paste to PS for image creation.

    This topic is similar to a post today in Mac Photoshop forum. When you copy+paste an Illustrator object with 3D effect from a RGB Illustrator file into an RGB Photoshop document, you get a quite an extreme color de-saturation (looked like a bright blue going dull from RGB to CMYK). Only occurs with active 3D effect. If you Expand Appearance, Flatten Transparency or Rasterize, then the original color is maintained.
    http://forums.adobe.com/thread/863273?tstart=0

  • Illustrator CC - Where are the Typekit fonts?

    One of the things I anticipated most about upgrading from Illustrator CS6 to Illustrator CC was access to the Typekit font library. The Creative Cloud application manager merely has a "coming soon" banner under the "Fonts" menu. I don't see anything in Illustrator CC related to Typekit.
    Does anyone know when the print oriented applications in CC are going to be able to use Typekit? Another thing I found disappointing in the fine print: only a partial group of Typekit fonts will be made available to applications like Illustrator CC and InDesign CC. Far more fonts are available to the web based applications. I figured I'd be able to use certain popular typefaces like Brandon Grotesk in Illustrator CC via Typekit. Now it looks like that might not be happening, at least not for now.

    Hi Bobby,
    As you've mentioned, we've announced the upcoming ability to sync Typekit fonts to your desktop. Unfortunatley, we don't have a specific ETA on this feature at the moment. However, we'll be sharing any updates on our blog: http://blog.typekit.com as they become available.
    We're starting with 175 font families from 7 top-tier foundries. You’ll be able to sync them to your desktop and use them in all your applications for web mockups, print design, word processing, and more.
    If you're wondering which fonts will be available to sync, please keep an eye on the blog: http://blog.typekit.com and twitter for announcements: http://twitter.com/typekit
    Also, we're talking with foundry partners about desktop sync fonts on an ongoing basis, and plan to add more fonts to the service as we go. We'll announce new font additions on the Typekit blog.
    In the meantime, if you need to work with a specific font in your desktop applications, you'll still need to acquire a desktop license from the foundry.
    If you have any further questions regarding Typekit, feel free to drop us a line at: [email protected]
    Cheers,
    Ben

  • New Fireworks fan!

    Hi,
    I've never posted in the Fireworks forum before as I had never (until recently) used this program.  I'm taking a class in it now, and I've got to say:  What an awesome program!  I never understood why anyone needed it before, but it's much faster at Web mockups than Photoshop.  I actually used to mock up Web sites in InDesign (wrong program I know) because mocking them up in Photoshop takes so long (hate having to constantly click on a layer name just to get to the object I want).   Anyway, it's got a really great selection of bitmap and vector tools -- most all the stuff I'd regularly need for a Web site.  I've watched a little more than half of the lynda.com video on this so far -- getting ready to try to understand the slicing stuff.  Looking forward to learning as much as possible.
    Okay, that's not a question, but I felt like saying how cool I think this program is.  I'll be using it a lot.  Should have studied it a long time ago....
    Thanks, Phyllis

    Yep its true its faster than Photoshop for mockups but I still have a number of niggles with it. I will add that you can select objects on screen with photoshop not having to use the layers pallet, I wrote about that a few months back here:- Quick select in photoshop.
    I wont go through all my niggles with fireworks now as I have only been using it for a few months and might find simple solutions to the issues. But one thing I will say now is I am upset that even with CS5 you can not move smoothly between illustrator and firework. Yes you can save fireworks files to illustrator 8, but come on version 8 is old and I find when opening the files in illustrator CS3 or CS5 that I cant work with it.

  • Using Visio for Web UI mockups - how do I add a drop-down menu?

    I found the control shapes and I see there is a listbox and a "drop down" but I want to save this visio file as html and have a few links that navigate to the different "pages"if possible.  
    Is it possible to actually create a dropdown menu and have it rendered in the html?

    If you are asking if it is possible to turn a mockup "drop down" or "list" shape into a real HTML "select" control when doing a web export - then no, it's not possible.
    If you just need a way to navigate on the exported web page, then note that Visio web export supports multiple pages; you can navigate between those by selecting them in Visio-provided navigation menu. Also, you can use normal hyperlinks to navigate to other
    locations/pages.
    -- Nikolay Belyh, http://unmanagedvisio.com

  • Can Edge Web Fonts be used for Photoshop website mockups?

    I'm keen to know if Edge Web Fonts can be used within Photoshop as an extension (to make the website mockup process smoother). I know Edge Web Fonts plays well with Muse and other Edge Tools, but I don't want to use Muse to build my sites - I just want to do my mockups in Photoshop. Can Edge Web Fonts work from within Photoshop, or will I be forced to switch to something like Extensis Suitcase Fusion for font management within Photoshop? Thanks in advance for your help!

    Problem solved - I've found everything I was looking for (and more) in Edge Reflow.

  • How to make a tabbed panel in fireworks for a web page?

    I know fireworks is not the best place to make a web page. I have to use this because it is a mockup for school. i have the tabs up and each state made in each tab i have the appropriate tab merging with the content area. I also have 3 other states I have created for each tab. first problem i am having is that when I click on state 2,3 and 4 I my content disappears including my master page and all of my other content I don't know how to make it show like it does in state 1. my second problem is I don't want to slice the hotspots to make the tabs. I just want to make the hotspots navigate to each state is that at all possible? or do I just have to slice it? the reason I don't want to slice is because the instructor does not like it when we slice content don't ask me why.

    Searched for a solution and I found a video tutorial about this:
    http://www.imoviehowto.com/imovie-ios-8-how-to-reverse-a-video-clip/

  • Strategy for converting HTML mockups to JSF

    This is a summary of our front-end development process:
    - designers create PNG mockups
    - UXers create HTML mockups
    - developers create final JSF
    Now, these HTML mockups are pretty complete. They use all our in-house JavaScript widgets, production CSS files, responsive design, accesibility requirements, SEO-friendly code, proper semantics etc. So basically the final HTML we need from the JSFs has to nail these mockups, otherwise widgets might not work, styles might not appear correctly, accesibility errors might crop in and SEO might suffer. The developers tend to have limited experience in HTML/JavaScript/CSS/accesibility, especially compared to the UXers, so the less they can do to screw up the HTML the better.
    With this in mind we tell our developers to just convert the very minimum to JSF. So that basically means forms & form elements and the occasional loop. For example we tell them to avoid h:dataTable and just use the given HTML table and a loop - for some reason (probably lack of experience) we found it very difficult to nail the right HTML in terms of thead, tbody, th and td (or to get a rowspanned "There are no results" output for empty lists). We even tell them to use straight EL instead of h:outputText (unless they really need it) for i18n literals or form outputs. Then there is the added complication in that we use HTML5 (currently using a RenderKit for that). I also prefer to avoid tying my HTML to a given technology: I don't want my JavaScript/CSS to depend on JSF (or PrimeFaces or whatever) output, I want it to depend on what we consider the "correct" HTML in terms of semantics (ie, unobtrusive frameworks).
    Would you say this is a correct strategy? I find it helps reduce developer workload (less to convert), reduces front-end errors (less to screw up), and might it also reduce memory footprint on the server (less component tree)? Or am I missing something?

    Hi!
    You can import your html page into project.
    1) Click 'File->Add Existing Item->Web Page'.
    2) In field 'File or URL' enter path to your html.
    3) Check that 'Convert HTML tags to JSF Components' checkbox is checked.
    4) Click OK.
    Your HTML page will be transformed to JSP page.
    Thanks,
    Roman.

  • InDesign for Website Mockups

    Does InDesign lend itself well to creating website mockups? Does it have any plugins or connectors suited for creating wireframes for Web, Mobile and Tablet? Thanks.

    If you really are working on a static design and are not coding, InDesign lets you setup a document for web intent where the page dimensions are set as pixels and the color and transparency blend space setup as RGB. So it depends where you are more comfortable and what you are trying to do—if I'm setting type and laying out a grid I prefer to be in InDesign.
    If you are using OSX you might look at this AppleScript, that opens a layered InDesign page into a same layered Photoshop image—so you can start in ID and move to PS:
    http://www.zenodesign.com/forum/PageToPSLayersV6.zip
    Here's the thread on its usage:
    how to export indesign layers to photoshop layers (same structure)
    Also the latest version of InDesign doesn't have an easy way to view monitor to image pixels at 1:1 (the equivalent of Photoshop's 100%), so check this thread, which has both Apple and JavaScripts for setting your view preferences:
    InDesign CS6 resolution for pixel documents not the same

  • Save to Web Color Shift with sRGB Working Space

    I'm having a problem a lot of other people have, which is the color shift when saving to web or viewing my work in a web browser.
    The solutions I've found in the past have been to simply make sure my working color space in Photoshop is sRGB and that my files are being built with that profile as well. I'm under the impression that sRGB is essentially the same color space as is used in a web browser, and therefore my work should look identical in both Photoshop and a web browser.
    So why am I still getting a color shift? Everything in a browser appears darker and with more contrast, as though the colors have been pumped up a bit.
    My monitor color has been calibrated with a Spyder 3 Pro and I'm using the profile it created for me as my OS X color profile. Thinking the shift may be related to my monitor profile, I tried switching to other profiles, but I still get a color shift in every single one.
    Any ideas? Thanks!

    sRGB based on capabilities and trends of development (circa late 1990s) for commodities CRT computers displays. sRGB per se has nothing to do with web browsers. The reason it has become associated with the web is the assumption that most web users are looking at content using a commodities CRT monitor using Microsoft Windows.
    It should be obvious that the use of a standard of some kind for display is better than none if there is to be any trend towards predictability of image display. Today, in commodities computing, that standard is sRGB: neutral color where R=B=G, and a gray ramp and primaries typical of the electron gun and phosphors used in CRT displays perfected for use in color television. It just so happens that this coding is rather will suited to get good value out of a minimum numbers of bits for color representation (e.g, 8 bits per channel 24 bit color)
    Web browsers in and of themselves don't have a color space. A few, such as Mac Safari, use the ICC color management capabilities of the system, and these display compensated color just like Photoshop does: if the image is tagged with an ICC profile, compensation will be applied in the browser window. But for the vast majority of computers and users, browser color is monitor color, and it's easier and most reliable for designers to just assume sRGB because it's the space that's the best approximation of the internet at large.
    You work usually will not look identical in Photoshop and a web browser (assuming that the browser does not or cannot do color management) because Photoshop is always soft proofing the working space onto the display. It is this quality that leads you to see parity between photoshop and the web browser when you choose you monitor profile as the working space: the soft proof produces no compensation.
    But while this fixes up your local experience it is -not- the solution because this projects your monitor characteristics into the image when you share it. For example, if your monitor has a lumpy non-linear tonal response and you correct image shadows or saturation for a certain look the image data will code your monitor response as well as your intentions for the image appearance. Others will see the combination of your correction for your monitor response mapped over their monitor response, in fact they will see an inversion of your monitor's response coded in the image, and to whatever extent your monitor deviates from the norm is the extent which at the very least others displays of the images you correct will deviate from your intentioned look.
    The answer to your problem--and this may surprise you--is to tolerate and appreciate the difference in display between photoshop's rendition of color and your browsers. Photoshop is showing your image more truly--within certain significant local limits--in terms of your working space than your web browser. By choosing an appropriate working space, and for the web it should be sRGB, and by profiling your monitor as you have, you are ensuring your images are normalized to current standards for web presentation. Others may still see crap, but it's most likely their problem and if they don't want to do anything about it that's their problem, not yours.
    There are a wide variety of reasons why a properly calibrated monitor will not match a working space which the soft proof cannot overcome. A monitor gamut larger than sRGB is not one of them. Photoshop will properly display sRGB data if the display profile properly characterizes the larger gamut display. This leads to questions about the effects of monitor quality on workflow. Maybe the most important of these is "How do I know my Spyder has properly calibrated my display!!!" But this is a topic for a whole 'nother thread.
    Where I run into trouble is when trying to make visual color comparisons during web design between my photoshop website mockup and a published site. I get confused and try to make color picker style matches by eye rather than by the numbers because I forget my web browser is not color managed. Sometimes I forget how all the parts play together and get confused and disoriented, then I make compounding mistakes. Then I start blaming my tools. Pity me.

Maybe you are looking for