: How to give a site a mockup look? Edit to clarify Thank you for the existing answers. I am afraid that you misunderstood my question. I don't want to create mockups (I have some, but they
Edit to clarify Thank you for the existing answers. I am afraid that you misunderstood my question. I don't want to create mockups (I have some, but they are not suited for my current purpose). I want a tool (possibly something as simple as a freely available CSS theme) which will make my existing, functioning half-finished ASP MVC site look like a mockup.
My boss's boss decided that I have to show the current stage of my work to my stakeholders, so they can get a feeling for the web application I am developing for them. It is a greenfield development, so the users have no expectations built from contact with prior version. He wants it to be at least a little bit clickable, so I can't go and post the mockups I am working from. It will have to be a running version of the current stage of development.
I want to make it crystal clear for the busy, critical mid-level manager that what they see is not what they are going to get, but an early sketch of it. It is a very sensitive matter, because my application increases the manager's paperwork load. Therefore they are already hostile towards the project and inclined to view the prototype in the worst possible way, making conclusions for the expected application quality from the design quality, and complaining that the vital functions whose implementations has not yet started are missing.
To do this, I would like to give my page a hand-drawn look, just like typical mockups. It should shout "I am a rough sketch" from afar, so that nobody could ever mistake it for the real thing.
What are good ways to create such a look? Is there a way more efficient than creating my own mockup-look CSS by hand? I am severely limited in the time I can invest in such a task, and I am also inexperienced at design. I need don't a perfect look, and the pages are nothing complicated, so the simpler the solution, the better.
More posts by @Shakeerah625
3 Comments
Sorted by latest first Latest Oldest Best
The first thing that comes to mind is to use a wire-framing tool such as Balsamiq to create the mock-up. This gives it a very "incomplete" feel:
Unfortunately, I don't believe you can export working HTML/CSS from Balsamiq, so instead I would use their style as inspiration to generate your "mockup CSS".
It's probably because I deal with Photoshop every day, but I always associate the checkerboard grid as something that is incomplete.
If not that, then perhaps some sort of grid used for the background would help convey an unfinished look.
An example of something like this I've seen in the past is the old style for Stack Exchange beta sites:
It is very faint, but you can see they used a grid as the background among other style elements to give it a very unfinished look.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.