They are high-quality interactive representations of your site design that allow for user testing and feedback. Prototypes demonstrate the functionality and usability of your site.Because mockups provide a near-final representation of how the site will look, this is a good stage to get stakeholder buy-in, without accumulating technical debt (we will get into that in a bit). They combine the structure of the wireframe with graphics, typography, UI design elements, and branding. Mockups are mid to high-fidelity visual representations of your website.Wireframing tools allow you to make revisions early in the design process before graphic design elements are added. They are low-fidelity representations of the content, structure, and information hierarchy. Wireframes are the blueprints of your web page.While there can be variations to each phase (like high-fidelity wireframes or low-fidelity prototypes), they generally flow in this order. The process of designing new website interfaces can be broken into three phases: wireframes, mockups, and prototypes. What are website mockups and what role do they play in web design? Similarly, there would be Wiki cards for any keywords in the search query typed in by the user.They communicate brand identity, define visual hierarchy, and allow you to get stakeholder buy-in - all before spending time prototyping or, even worse, starting to code.īut before we dive into the world of mockups, we first need to understand what they are, and what they aren’t. For eg, if someone searches for “ Properties in Kharghar”, a wiki card will show up on top, above the search results. I also defined something called as the “Wiki Card”. Then I proceeded with designing the format for predictive search and the layout for search results page, for which I stuck to the two-column layout used in other internal pages. “What is the future of Kharghar?”) - By Locality - By Developer - By Special tags (eg. I identified 4 key means by which a user would want to search discussions on a real estate forum: Making the search experience seamless was an important part as 25% percent of direct users were using the search bar, and a very substantial % of organic traffic via search engines landed on the search results page. Now that I had the main framework and important pages all defined, I started detailing additional pages and actions. Step 5 : Detailing out search, create new discussion and gamification of user profiles Here is a video that was recorded during testing and shows a user navigating through prototype-1: Each user was asked to use both the prototypes, one by one, and we recorded their actions and noted their comments on each. Then we recruited users to carry out the exercise. We chose principle as it speedily allowed us to create scrolling and tapping actions, and record screen videos while testing that could be analyzed later in depth. We created two separate prototypes on Principle. Not wanting to decide solely on our intuition, we decided to go ahead with a usability testing exercise. Step 4 : Prototyping and User testingīy the end of the wireframing phase, I along with Neelam had come up with two approaches that seemed equally effective. This ensured that major city forums got due attention, as 80% of our users chose to browse within a single one of these city forums.įor the internal pages, I defined a two-column layout that aided reading and provided scope for adding suggestive information and other CTAs on the right. Sketch wire frame iterations for forum and thread pagesįor the home page, I chose a single column layout with tiles for major city forums with a expandable drop-down for more cities, and a table with tab navigation for various other global forums.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |