Home | History | Annotate | Download | only in design-navigation

Lines Matching full:news

25 <p>Now that we have a solid understanding of navigation patterns and screen grouping techniques, it's time to apply them to our screens. Let's take another look at our exhaustive screen map for the example news application from the <a href="screen-planning.html">first lesson</a>, below.</p>
29 alt="Exhaustive screen map for the example news application" id="figure-exhaustive-map">
31 <p class="img-caption"><strong>Figure 1.</strong> Exhaustive screen map for the example news application.</p>
41 <p>Finally, let's look at how we present news stories. The first option to simplify navigation across different story categories is to use horizontal paging, with a set of labels above the horizontal swiping surface, indicating the currently visible and adjacently accessible categories. On tablets in the landscape orientation, we can go a step further and present the horizontally-pageable <em>Story List</em> screen as a left pane, and the <em>Story View</em> screen as the primary content pane on the right.</p>
47 alt="Final screen map for the example news application on handsets" id="figure-map-example-phone">
49 <p class="img-caption"><strong>Figure 2.</strong> Final screen map for the example news application on handsets.</p>
53 alt="Final screen map for the example news application on tablets, in landscape" id="figure-map-example-tablet">
55 <p class="img-caption"><strong>Figure 3.</strong> Final screen map for the example news application on tablets, in landscape.</p>
86 <p>After sketching out layouts on paper and choosing a digital wireframing tool that works for you, you can create the digital wireframes that will serve as the starting point for your application's visual design. Below are example wireframes for our news application, corresponding one-to-one with our screen maps from earlier in this lesson.</p>
91 alt="Example news application wireframes, for handsets in portrait."
96 <p class="img-caption"><strong>Figure 5.</strong> Example news application wireframes, for handsets in portrait.
102 alt="Example news application wireframes, for tablets in landscape."
107 <p class="img-caption"><strong>Figure 6.</strong> Example news application wireframes, for tablets in landscape. Also includes an alternate layout for presenting story lists.