1 / 6

Creating Content Wireframes for Responsive Web Design

In this document we will focus on the methods used in wire framing process for responsive web design and how user will access the content.

anthonyscoble
Download Presentation

Creating Content Wireframes for Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating Content Wireframes for Responsive Web Design When creating a new website or redesigning one, designers need to define a site strategy about the information they will provide to their visitors. As information architects, they need tools that help clients understand the structure of their content. One tool we have found particularly helpful is wireframes. Basically it is a visual representation of your user interface. You can use wireframes to communicate four things. Navigation Structure Layout - the page hierarchy and placement of elements on the screen. It gives an idea to content writers of how content will be placed within the design. Functionality – describes how product will work, and how it interacts with the people using it.

  2. In this article we will focus on the methods used in wire framing process for responsive web design responsive web design and how user will access the content. Introducing the Content Wireframe Introducing the Content Wireframe The concept of content wireframe is think about the user, not the technology. It establishes an information hierarchy and flow. Creating Content Reference Wireframes Creating Content Reference Wireframes You can create the content reference wireframes with a code editor such as Coda or Adobe’s Brackets. But for those who are let say code challenged, we will choose illustrator that will fit you best as its artboards enable you to start with a mobile-first approach and grids allow for consistency of design. You can easily create precisely sized boxes for wireframe.

  3. A Mobile A Mobile- -First Approach First Approach to to Content Wireframes Content Wireframes For a mobile first approach, use illustrator to focus on the important part of the content. Let’s create 5 viewports to layout the foundation for a responsive content wireframe 1. CREATE THE DOCUME 1. CREATE THE DOCUMENTS NTS In Illustrator, create five new documents with the following widths and heights (in pixels): 320 × 800 768 × 1200 992 × 1400 1224 × 1600 1440 × 1800

  4. 2. CREATE THE 2. CREATE THE CONTAINERS CONTAINERS In the 320 pixel-wide document, make seven unlined boxes filled with neutral gray. 3. CREATE THE LABELS 3. CREATE THE LABELS Place text over each box — in descending order: Header, Main video, Video 02, Video 03, Video 04, Video 05 and Footer.

  5. 4. RESIZE T 4. RESIZE THE BOXES HE BOXES Make the main video box a little bigger than the others to indicate its priority. If necessary, scale down the header and footer — but keep them full width. . 5. COPY THE BOXES 5. COPY THE BOXES Now that you have relative sizes and labels, copy the boxes to the other documents or artboards. They represent the existence of content, not the content’s precise sizing or spacing.

  6. In the above article you have seen that, you can create content wireframes by simply deconstructing the websites into their basic building blocks. iMediaDesigns has expert website designers in custom web design and web development web development, that helps brand create unique identity and successful marketing campaigns. custom web design and

More Related