Every step in the path to building a website involves conceptualizing your creation along increasingly realistic steps. By the time you are ready to lay down some serious pixels in Photoshop, you should be creating something that doesn’t just resemble the final product — it looks exactly like it. Fully designed and accurately proportioned, your deck of layouts is an exact description of what you intend to build.
By doing yourself the tiny favor of mocking up your concept in a browser frame you can also remove some frustrations that can ruin the zen of your design. By accounting for these early on, your site will remain strong, using available space wisely and working on a variety of platforms. You may not realize some of these until you mock up a website that is framed by its natural environment, so I’d like to mention some of the considerations.
- The browser affects the user’s perception your website’s design and interface.
- A monitor may be 1024×768 pixels; the resulting browser portal window is not.
- The vertical scrolling track takes up space, and may not always be present
- A user may configure their browser to use more or less space
The last added bonus of this is that you can manipulate these photoshop files to depict a browser of any size. If it’s helpful to show your site or application on a wide screen monitor, non-standard aspect ratio, or one that’s extremely small, you will want to demonstrate that to the project stakeholders. Often times, doing such excercizes will even help you catch something you may have missed. Errors such as primary content below the scroll or applications that don’t utilize the aspect ratio well will be exposed.
Feel free to download these photoshop templates to get you started in mocking up your designs in their natural habitat. I’ve provbided zip files that contain PSD’s of the following browsers:
Enjoy!
Great post..Keep them coming
Thanks for sharing.