![]() The homepage of artist Aurélia Durand’s mobile portfolio site - by Copenhagen-based design agency Granyon - showcases both her artistic style and a key theme in her work: the strength of Black women. Instead of a classic written menu, Bibis uses mobile-first functionality and interactivity in a unique way to involve the user, showcase the gorgeous desserts, and help patrons order their top choice. ![]() Each of these icons offers more information without cluttering the screen or distracting from the desserts. The website also features two prominent icons at the bottom of the mobile screen: a diet filters icon that filters by gluten-free and vegan options, and a button that minimizes each dessert listing so more fit on the page if that’s what users prefer. Scrolling displays each menu option the same way. A small hand-shaped icon invites users to tap and drag the 3D photo around so they can admire the dessert from all angles and decide whether they want to order it. The first image on the website is a revolving tiramisu on a black background. It offers a quick overview of each dessert to help diners choose, with a large order to table button at the bottom. Most site visitors will be at the restaurant and ready to order on their phones, so the layout is enticing and straightforward. Harry Gearty designed this dedicated mobile restaurant website for Bibis, an Italian restaurant in Leeds, U.K. These collapsible options use text, not defined buttons, to avoid distracting users from the main login and sign-up CTAs. Other important site sections, like products and templates, are in the middle of the sticky menu with dropdowns for navigation. The login button has an off-white background with black text, and the sign-up button inverts this color scheme, using higher contrast to capture attention. There’s a small Typeform logo in the far-left corner, and to the right of the sticky menu are clean login and sign-up buttons. Typeform’s desktop site has a horizontal sticky menu at the top of the page. One way to understand how mobile and desktop designs differ is to compare both versions of the same website. Mobile-friendly websites usually feature:īuilding for mobile and desktop: What’s the difference? Focus your mobile website designs on clarity and efficiency to tell users what they need to know right away without cluttering the small screen. If a visitor finds navigation frustrating, they might leave your site.ĭon’t forget that desktop visitors are seated and focused, but mobile users might be on the move, browsing during their commute or looking for information on the go. To accommodate, make buttons big and prominent, and give hyperlinks enough surrounding white space so users can tap on them without hitting anything else. Mobile users use their fingers, which have less precision than computer cursors, to navigate a website. Consider using a vertical layout that lets mobile users scroll down rather than sideways through a horizontal gallery. Leave enough space for every element to breathe, and keep the portrait orientation in mind. ![]() Smaller screen sizes on mobile devices mean you need to adjust the layout design to prevent crowding. Three central elements create a successful mobile web design: layout, navigation, and communication. Plus, the limited space in mobile design helps you notice which elements are and aren’t working so you can prioritize designs that pop.ĭesign a website that works for both desktop and mobile visitors - your audience will thank you. Sometimes all it takes is a few adjustments to transform a desktop layout into a great mobile website design. When creating a mobile website, work with the smaller screen and tap-through navigation instead of against them. Small button text is harder to read, and larger design elements can obscure calls to action (CTAs) that encourage visitors to take a desired action. But some desktop elements don’t fit on mobile. ![]() Many web development platforms offer automatic mobile optimization that alters desktop designs to fit a smaller screen.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |