GrayBox Responsive Website Wireframes Collection for Desktop, Tablet, and Mobile

GrayBox Responsive Website Wireframes Collection for Desktop, Tablet, and Mobile

19.00 23.00


If you would like to get an idea of what is included in this full collection of responsive wireframes, I am offering a freebie download to try before you buy. There are 3 Adobe Photoshop .PSD files in a desktop size, a tablet size and a mobile size containing just one sample category showing responsive layouts for portfolio boxes. Access the freebie here:


Introducing the GrayBox Responsive Website Wireframes Collection in Adobe Photoshop format. This is a collection of years of work and includes ready-to-go, pre-made wireframing elements in 15 popular categories designed to help you jumpstart your website projects while saving you time and money.

As a User Experience Designer, I have 10+ years of experience in UX design and producing responsive web projects for all sorts of clients and industries. And because I have been designing websites since 1995, I'm often asked to share my processes and tools with other designers. With that in mind, my goal for this product was to create a library of commonly used responsive website wireframing elements for others designers who would like to quickly get started with wireframing. When I first started out, I would have loved to get my hands on this collection so I could hit the ground running with my projects. Especially useful is being able to understand the grids used and how corresponding layouts and elements are thoughtfully reduced from desktop to tablet to mobile if a developer is not handling it in the development phase.

Included in this package are 3 Adobe Photoshop .PSD files in a desktop size, a tablet size and a mobile size. Every single category within the .PSD comes in 3 layout options in order to quickly create and present wireframes for a responsive website.

Now you can take matters into your own hands with a variety of pre-made wireframing elements that you can fully edit, adapt, or mix and match. The possibilities are unlimited with these meticulously organized, user-friendly templates, and detailed user guide PDF. These wireframe elements are meant to be multi-purpose and can be altered for any product, service, or industry type. Mix and match layouts for endless wireframe ideas for your clients.

As the screen size shrinks from desktop to tablet to mobile, you will see that certain layouts in some categories change a bit. With that in mind, I have included notes within the user guide regarding aspect ratios and thoughtful reduction and re-arrangement for responsive wireframing.

Also available at the Happy Monday shop at Creative Market >



1280px Desktop Grid: 1280px grid / 12X 70px columns / 11X 40px gutters

768px Tablet Grid: 700px grid / 8X 70px columns / 7X 20px gutters

320px Mobile Grid: 290px grid / 2X 15px borders



  • 1X Desktop Size Adobe Photoshop .PSD file

  • 1X Tablet Size Adobe Photoshop .PSD file

  • 1X Mobile Size Adobe Photoshop .PSD file



Because I work with large agencies and development firms, it is still a requirement to use Adobe Photoshop as part of the static wireframing process (even though Sketch and XD are becoming more popular). Why is that? Well, the main reasoning is because Photoshop wireframe elements can be more quickly be turned into a responsive website design, thus saving clients a lot of time and money.

If a lot of folks start asking to have these wireframes translated into Sketch or Adobe XD, I will consider providing them in that format. As I have never worked within an agency or development firm process that requests wireframes in an Illustrator format, I'm unable consider translating to Illustrator due to the limited audience.



  • 3X Grid Guides Layer folder

  • 3X Headers with Hero Areas

  • 3X Navigation with Dropdowns Options

  • 3X Text Blocks Layout Options

  • 3X Content Box Layout Options

  • 3X Event Layout Options

  • 3X Portfolio Layout Options

  • 3X Video Size Options

  • 3X Instagram Feed Layout Options

  • 3X Shop Layout Options

  • 3X Form Layout Options

  • 3X Team Layout Options

  • 3X Blog Articles Layout Options

  • 3X Testimonials Layout Options

  • 3X Call-to-Action Layout Options

  • 3X Footers Layout Options

  • 1X Detailed User Guide PDFs



  • Adobe Photoshop .PSD format (CS4+)

  • All fonts are free for both personal and commercial use and the download links are listed in the user guides.

  • Fully customizable, resizeable, and well organized – you can edit the layer groups and layers, colors, fonts, vector shape artwork, and more. None of the artwork is raster.

  • The user guide is meant as a quick start guide to get you on your way as quickly as possible.



  • The files are not intended to work with any other software. You can get free 30-day Adobe software trials here:


  • Purchaser will download and install fonts.

  • Every usage will have slightly different needs depending on the desktop and tablet grids you are using. Ask your developer for grid advice if necessary.


Need help? Should you find any errors in this product, please contact me.

As well, If you have no idea where to start, I specialize and suggesting the most cost-effective solutions and consulting packages. Please email me at for more information.

Add To Cart