Results 1 to 6 of 6

Thread: Mock first or Photoshop first

  1. #1
    Join Date
    Mar 2014

    Mock first or Photoshop first

    Hi, am new to the web design world and not sure which of the two is the norm and standard approach:
    1) Design in Balsamiq or Azure with the mock and functionality, then beautify it by a designer.
    2) Design in Photoshop as a view of how it may look like, and then generate corresponding CSS & HTML.

    My thought initially was 2) above as that gives the designers the most freedom in putting together something that looks nice, is easy to use, and then generate the CSS and HTML later. However I have also seen some comments on the web suggesting that it's best to use a mock tool first by going through 1) before applying any beautification process.

    Can someone please enlighten me if there are any pros and cons for doing either approach? Is there one approach that is more typically used? Or this is purely personal preference?

  2. #2
    Join Date
    Mar 2005
    Behind you...
    I think it really depends on a few factors.

    In my professional experience I've seen both. We often had landing pages (typically used for A/B split testing, but occasionally new campaigns/promotions) built in Photoshop by our designer, and then I would build said pages. When my company redid their website, our designer pretty much came up with everything from scratch in Photoshop again. The only difference would have been there was a basic outline of things we did need to have on each page, but other than that no real framework.

    There have also been many times where a page will be built essentially as a mock-up first, and once the functionality is in place design elements and styling are added to make the page more visually appealing to users. This tends to be the case when it's a page that is more code/programming heavy (vs content).

    So ultimately that would be my best way to distinguish between the two cases. If a page is more content-based than code-based, it should probably be designed first. But if a page is less about the content and more about some sort of front-end/back-end coding and/or processing, a mock should probably be built to provide an outline for design.
    Last edited by Sup3rkirby; 04-28-2014 at 01:54 PM.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2014
    Can you give some examples of why you meant by code-based or content-based?

  4. #4
    Join Date
    Mar 2005
    Behind you...
    So a 'code-based' example would be something that mostly relies on back/front-end systems to actually be of use. This could include certain order forms/pages, or pages that need to write to databases (typically with specific information or data structures). Basically, if there are specific requirements for what must be on a page then it's probably best to do a mock-design first and let a designer polish it up.

    And so examples of 'content-based' pages would be things geared more towards marketing or basic conversions (like email signups). Pages such as promotions/advertisements, newsletter signups, etc. are probably best handled by a designer in Photoshop initially, and then built out by a developer later.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Aug 2004
    All to often left out: a usability expert driving the design process to make sure it maximizes ease of use, click-through rates, etc. There are few things more wasteful than an artistically gorgeous site built with amazing cutting-edge code that nobody actually can/will use.
    "Well done....Consciousness to sarcasm in five seconds!" ~ Terry Pratchett, Night Watch

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

    My Blog
    cwrBlog: simple, no-database PHP blogging framework

  6. #6
    Join Date
    Dec 2002
    Seattle, WA
    I used to mock up web pages in image editors first. After many years of web developing, I mock up web pages in html if I need to. Using html makes more sense to me, and makes making changes much easier, and best of all if the concept works, you have very little to change in order to implement the web page.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.09103 seconds
  • Memory Usage 2,887KB
  • Queries Executed 15 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates