Show mockup in a Web browser

**nicnicman** · 12-05-2012, 11:52 AM

Hello everyone,

For my systems analysis class we need to create a mockup of a Web-based employee information system.

What is the best software for creating a Website mockup? I found Pencil which is free and looks pretty good, but I would love to hear other suggestions.

Once a mockup is created, what is the best way to show the mockup in an actual browser? I don't see an easy way to do this in Pencil.

Thanks for any suggestions.

**theyoker** · 12-05-2012, 03:08 PM

No need to create an image of a database plan when you can use a table.
So from what I can see you just want to make a fake table. I google'd pencil which seems to be like paint program.

If you use the following code I made it is a very simply mock database. (Like a plan of a database).

Code:

<table border="1">
	<tbody>
		<tr>
			<td>Employee ID</td>
			<td>First Name</td>
			<td>Second Name</td>
			<td>Address</td>
			<td>Telephone</td>
			<td>Home Phone</td>
		</tr>
		<tr>
			<td>1</td>
			<td>Bravo</td>
			<td>Jonny</td>
			<td>342 Google Street</td>
			<td>000000000</td>
			<td>000000000</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Bugs</td>
			<td>Bunny</td>
			<td>214 Firefox Rd</td>
			<td>33523523535</td>
			<td>3532523532</td>
		</tr>
	</tbody>
</table>

**nicnicman** · 12-05-2012, 03:13 PM

Thanks for the help, but really all I need to do is show the user input and output screens. Specifically, for input we need to illustrate a log in screen and a employee look up screen. Then, for output we need to show a detailed report and a summary report.

The professor is not asking for any code, merely a mock up or "dummy" version of the web-based system.

**theyoker** · 12-05-2012, 06:04 PM

I think it would be better practice if you made your "mock" system in HTML. But I'm not a teacher.

Code:

<html>
<head>
</head>
<body>
<form method="" action="">
<h4> Employee Login </h4>
Username: <input type="text" name="username" size="20" /><br />
Password: <input type="password" name="passwort" size="20" /><br />
<p><input type="submit" value="Login" /></p></div>
</form>
<form>
<form method="post" action="">
<h4> Find Employee Records </h4>
<textarea name="search" cols="25" rows="1">
</textarea><br>
<input type="submit" value="Fined Employee" />
</form>
</form>
</body>
</html>

The above code shows a simple login system and a search box when click it would bring up employee information.
For the output you could be lazy, just open up Microsoft access every uni/college has it. Make some fields e.g. ID(Primary), First Name...
What ever you want in your report and use the report wizard simply print screen it and your works done. I don't see a problem in your print screening a login system or the search box either.

To display it within a browser you will need to use code.
Save your images. e.g. ( imageone.jpg)

Code:

<img border="0" src="imageone.jpg" alt="">

You can use any software to edit images. I'd download GIMP it's free and like photoshop.

Best of Luck.

**nicnicman** · 12-05-2012, 06:43 PM

Thanks for your help. Since this is a systems analysis class the object is to make something that the user can look at and still be easily changed if the user is unhappy.

Thread: Show mockup in a Web browser

Thread Tools

Display

Show mockup in a Web browser

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions