Mockup

MockUPIn manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes. A mockup is called a prototype if it provides at least part of the functionality of a system and enables testing of a design.

Software Engineering

The most common use of Mockups in software development is to create user interfaces that shows the end user what the software will look like without having to build the software or the underlying functionality. Software UI mockups can range from very simple hand drawn screen layouts, through realistic bitmaps, to semi functional user interfaces developed in a software development tool.

Mockups are often used to create Unit tests – there they are usually called Mock objects. The main reasons to create such mockups is to be able to test one part of a software system (a unit) without having to use dependent modules. The function of these dependencies is then “faked” using mock objects.

This is especially important if the functions that are simulated like this are difficult to obtain (for example because it involves complex computation) or if the result is non-deterministic, such as the readout of a sensor.

Mockup Software can also be used for micro level evaluation, for example to check a single function, and derive results from the tests to enhance the products power and usability on the whole.

Common routine for web designer

690284_b512

The common routine requires the following main steps:

  • Step 1: understand the theme and the topics of the website and decode the client’s requests
  • Step 2: choose the right style and sketch your ideas
  • Step 3: draw a clean and clear wireframe to summarize the structure of the website
  • Step 4: design the website (in pixels) through an image editor, like Photoshop, to create a real-scale mockup
  • Step 5: convert your psd mockup to HTML and CSS

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML5 and CSS3.