Responsive Layouts:
This video shows the responsive layout of the ROGUE website and how the design adapts seamlessly across different devices, from desktop to mobile. Both versions of the site include the same content, but the layout is adjusted to suit the screen size and user experience. On desktop, the design takes full advantage of the larger screen space, allowing content to be spread out more evenly across the page for a clean and open feel. On mobile, where space is more limited, a dropdown menu has been introduced to keep the interface tidy and user-friendly. This approach avoids cramming all the content into one small screen and instead offers a more organised and accessible experience. Additionally, the mobile version incorporates side-scrolling functionality, taking advantage of touch-screen navigation. This not only saves space but also maintains a balanced, interactive layout that feels intuitive for mobile users.
Interactive Website Design:
The interactive design of the ROGUE website plays a key role in enhancing user experience and accessibility across every page. The demonstration video highlights how users can smoothly scroll through each section of the site, showcasing the dynamic flow of the layout. On the homepage, interactive buttons feature hover functionality by changing colour when hovered over to indicate they’re clickable, giving users clear visual feedback. A drop down accessibility bar is also available on the homepage, offering a range of text and visual adjustments to support different user needs. The hover effect is also applied to the navigation tabs on the top bar, maintaining a consistent interactive experience throughout.
Social media icons are included on every page, making it easy for users to connect with ROGUE and get in touch, no matter where they are on the site. Key pages like Program and Tickets include fully functional buttons to guide users through important information and actions. The ticket purchasing system is designed for ease and clarity and is easily accessible by activating instantly when a user clicks the ticket button, launching a four-step process clearly marked by a progression bar so users always know where they are in the journey. Finally, clicking the ROGUE logo at the top of the page serves as a quick navigation tool, instantly bringing users back to the homepage from any section of the website.
Interactive Companion App Design:
The interactive companion app for the ROGUE gaming convention is designed specifically for mobile and tablet use, with a streamlined layout and intuitive touch-based navigation. The demonstration video above shows currently what it looks like and takes you through its interactive features. It begins with a login/sign up screen, and at this stage in development, clicking login takes users directly to the app’s homepage, with additional sign-up steps to be implemented later. Due to the touch-screen nature of mobile devices, hover functionality used in the desktop site) has been left out, as users can’t hover over buttons with a cursor. Instead, the app focuses on simplicity and ease of use tailored for touch interaction.
The homepage provides a selection of clickable images that will be labelled in future updates, along with a search bar for users looking to find specific information quickly. The navigation bar is placed at the bottom of the screen to improve usability, making it easier for users to access buttons without stretching across the screen. It includes three main options: an interactive event map, a tickets page, and a program page. The program page mirrors the name of the website for consistency and includes a clear, easy-to-understand schedule. It also features functionality that will allow users to favourite specific events and receive notifications when they are about to begin, with a dedicated favourites section planned for the account page later.
Each navigation button changes colour when selected, clearly indicating the active page. Like the website, the ROGUE logo in the top-left allows users to return to the home page from anywhere within the app. The account page, accessible from the top-right, includes options to upload a profile picture, adjust user settings, and log out securely, which returns the user to the login/sign-up screen for added privacy and control.