Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to create web design mockup

Discussion in 'Website Design Forum:' started by Kya, Feb 14, 2012.

  1. Kya

    Kya New Member

    Hi there,

    I would like to learn how to create a web design mockup, someone can suggest me some sites?Are on line a guides about it?Which software used for create it?

    Thank u very much.
  2. Corrosive

    Corrosive Moderator Staff Member

    First it is a good idea to 'wireframe' the pages/sections you want to make sure your design fits your content. Then you can dive into Photoshop and lay out your design. After that you need to code up the site and publish it on the web.
  3. Edge

    Edge Active Member


    Fireworks is a bit easier to pick up than Photoshop and if you are doing purely web stuff should suffice. If you haven't got the cash then try Gimp. Word of warning on the wireframe front. It's something we always do but sometimes the clients just look at them and go wtf? They usually need their hand holding during this part of the design process.
  4. johnsellinge

    johnsellinge New Member

  5. jaydenharris98

    jaydenharris98 New Member

    There are nine useful tips for web design mockup.

    -Use shapes and shape layers as often as possible.
    -Use web safe fonts on any parts of the site with live text.
    -Save the finished product as a JPEG at 100% quality.
    -Use Crisp antialiasing on your font layers.
    -Use different layers for multiple versions of the same page.
    -Get your width right.
    -Blending options are your friend
    -When it comes to mocking up forms, don’t reinvent the wheel.
    -Use n ested layers to duplicate the DOM.
  6. NUGFX

    NUGFX Member

    1st thing i do is think about how i want it to look (shape, width, colour)

    then i draw a concept out on paper, then eventually moving into photoshop starting from the background design and working up to were content is positioned (might sound weird)
    always use shape tool as its easier to edit for future. once im happy with design chop it up into as less pieces you can (for eg. you have a nav bar thats a green gradient DONT use the whole image as its a repeated image so just chop it about 2 or 3 pxl and u can repeat the img. also when using images on your site only use JPG for high res images (banner, content image) and for the rest (logo, nav, footer etc. use png.)
  7. barry-M

    barry-M New Member

    dude all you have to do is get Gimp or Fireworks and draw it in them. then slice it up for production - its dead simple.. you just need to get in to a routine.

Share This Page