![]() ![]() Moving up in width now– here’s the tablet layout: Click for full-size It wouldn’t make much sense to try to make the sidebar next to the regular content, because phones just aren’t wide enough to fit both side-by-side. Stacking is the most basic way to fit content efficiently onto a narrow device like a mobile phone. You can see that all the sections basically stack on top of one another in one long column, including the sidebar. Here’s the mobile layout: Click for full-size I use an online tool called MockFlow to create my basic wireframes. The sections we will be building contain the Header, Hero, Content section, Sidebar, and Footer. We’re going to break up the website into its core sections and decide how each section will look on mobile, tablet, and desktop. They can be super detailed, almost like designs, or they can be basic and just document the main aspects.įor our purposes here, we’re going to have a very basic wireframe. Wireframes are diagrams of all the organizational parts of your website. ![]() Sound good? Let’s get started! Wireframing out the website layout I’ll explain my thought processes as I go, and share what I’ve found to be good practices.
0 Comments
Leave a Reply. |