Mockup resources and tools in web development

Design on the Web has changed a lot since the days of marquee scroll and table layouts and this has also changed way we display designs.

There is a lot that goes into designing a web interface, from storyboarding to a sketch/wireframe/whatever-hip-thing-kids-use-now(cough sketch)/ a pretty static Photoshop document. Eventually your designs will end up on …the web.

Since the designs will be used on a device like a computer, mobile or future toasters that connect to the Internet, it makes sense to showcase your designs with those devices.

apart from giving context to the design, mockups with devices look more natural and prettier

Also we can all agree apart from giving context to the design, mockups with devices look more natural and prettier.

There are a few ways to generate a mockup of your shiny designs with a device template

• Generators — Generating mockups from uploaded screenshots
  • Placeit
• HTML5 templates
  • Pixelsign HTML5 device mockups
  • MockuPhone
• Photoshop — Manual way using blank templates
  • Facebook design resources
• Sketchappsources — Device mockup resources for Sketch

I’d like to hear more on your experiences with presenting web designs and other tools you use.