Designing Content Wireframes For Responsive Website

Saurabh Tiwary | 7th June 2016

Content Wireframes are undoubtedly one of the major tools that describes how content should be structured and organized on your website. Alternatively, the concept extends the idea and general principles of content architecture for any website. It revolves around the philosophy- Fall in love with the user, not the technology.

Content Wireframes

Content Wireframing is carried out in two ways:-

  • Develop A Content Inventory
  • Create A Visual Hierarchy


A Content Wireframe describes placement i.e. a wall, a counter, a header, a footer etc. and establishes an information hierarchy and flow. Having done with this course of action, we can gradually move to the low-fidelity and high-fidelity wireframe development process.

Content Reference Wireframes

A number of code editor tools are often employed for designing content reference wireframes such as Adobe Illustrator, Macaw, UXPin etc. They all have their specific applications. However, a responsive editor has the advantage of providing the designer more than one perspective on their work like evaluating the design on different screen sizes.

Mobile-First Approach For Content Wireframes

Among a number of wireframing practices, Mobile-First Approach is highly preferred in Content Wireframes. So, let’s describe how to create a Content Wireframe using Illustrator.


Step 1:- Create The Documents

Create five new documents with the following dimensions (in pixels):-

  • 320×240
  • 480×640
  • 480×800
  • 640×1040
  • 720×1200

Content Wireframe -1

The dimensions can be manually set depending on the version of the Illustrator.


Step 2:- Create The Containers

Using “320×240” document, make seven unlined boxes filled with neutral gray.

Image 1


Step 3:- Create Labels

Once you create the boxes, label them with individual names.

Image 2


Step 4:- Resize The Labelled Boxes

It is often essential to modify the size of the boxes depending on the text requirement. So, resize them accordingly.

Image 3


Step 5:- Copy The Boxes

Once you are done with the relative sizes and labels, copy the boxes to the other documents or artboards. You can redefine the size as needed, and also remember that these boxes are approximate. These only represent the existence of content but not the content’s precise sizing or spacing.

Image 4


There are not too many of secrets to designing Content Wireframes. They can easily be adapted into the workflow between the content inventory and the low-fidelity wireframes. That’s because their purpose is to simply establish an information hierarchy.

Oodles Studio is one of the leading design companies with technical expertise in website wireframe design, Mobile Apps UI Design, Video Animation Design etc. Our designers aim to deliver the clients with the best in-class and cost-effective designing services  based on the client’s requirement.

About Author


Saurabh Tiwary

5 Comments To “Designing Content Wireframes For Responsive Website”

    Anilkumar shetty says:
    September 2, 2016 at 3:29 am

    Hello Sir/madam,

    I have good knowledge Html,css,jQuery, and photoshop ,Ai , email-layout, bostabootstrap, responsive layout.


    Ace institute of dentistry says:
    January 17, 2017 at 7:13 am

    nice information. thank you for sharing acedental

    Ace institute of Dentistry says:
    January 18, 2017 at 10:55 am

    good article. very helpful content. Thank you for sharing.

Leave a Comment

Name is required

Comment is required

© Copyright 2015-2024 Oodles Studio. All Rights Reserved.

Request For Proposal

Recaptcha is required.