• 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


Kya

New Member
#1
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.
K.
 

Corrosive

Well-Known Member
#2
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.
 

Edge

Active Member
#3
Fireworks

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.
 
#5
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
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
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.