InterfaceFire is a modern styled application designed as a gaming interface critique platform. It showcases interesting game interfaces, providing insights that may inspire UX designers in applying similar concepts to real-world applications. The primary purpose of this application is to familiarize users with various interfaces and their functionalities in gaming contexts.
You can view the live application here: InterfaceFire
You can view the Github repo here: Github Repo
- Several Technologies were used (e.g., HTML, CSS, Script) to build this website.
- Accessbility tools: axe DevTools, WAVE, W3C validator and Color Contrast were used to test the accessbility.
The final iteration of InterfaceFire includes 3 html pages and each pages has its unique css style sheets:
- index.html: Main page introducing the project with a brief introduction of this project and several insights of critique for the game cyberpunk 2077, enriched with embedded videos and images. [hr] breaklines were used to seperate each rich content sections.
- index.css: Imported Poppins font for overall webpage styling; Black, Grey, White and Red are the main colors. Customized hr breaklines to fit the thematic elements and displays images and captions distinctively.
- UIcollection.html: Displaying a collection of user interface designs from various games.(The content will be growing over the time as I want to contine to build this web).
- UI.css: Utilized a unique style of frame for the gallery. Created Hover-Zoom effect for the images for a focus look into each displayed interface.
- social.html: Featured a card view for social media profiles, providing direct links to personal accounts on Steam, GitHub, and LinkedIn. This can be a open source project, it encourages open-source contributions and gathers user feedback through a Formspree-integrated form.
- style.css: Content used different styles, margins and paddings. The page is more like a minimalist style than other pages.
The navigation bar and font styles stays the same across 3 pages, even each html page has its own css sheet. Breakpoint was added all 3 pages to make sure the navigation bar is responsive.
Throughout the project, several key skills were developed:
- CSS Implementation: Gained proficiency in writing and implementing unique CSS styles for webpages.
- Modular CSS: Learned the benefits of maintaining separate CSS files for each HTML page to enhance modularity and maintainability.
- Advanced CSS Styling: Mastered techniques for displaying and styling image alt text captions and using clip-path to create custom polygon shapes for styling image frames.
The development process presented unique challenges which were addressed as follows:
- CSS Integration: Initially faced difficulties in integrating complex CSS styles while maintaining a consistent navigation bar across different pages. This was overcome by experimenting with several navigation styles and refining CSS code to ensure compatibility and functionality across all pages.
- Page-Specific Styles: The need to style each page with a different CSS file added complexity, requiring a careful and deliberate approach to ensure design consistency and functionality across the site.
Looking forward several enhancements are planned to elevate the user experience and functionality of InterfaceFire:
- Mobile-First Design: Transitioning to a mobile-first design approach, with additional desktop breakpoints to optimize the viewing experience across all devices.
- Navigation Improvements: Replacing the current navigation bar with a hamburger menu on mobile devices to maximize space and enhance usability.
- Content Expansion: Enriching the UI collection page by incorporating JavaScript to add filter options, allowing users to sort through interfaces more effectively. Enhancements will also include onClick functionalities that display detailed information about each interface.
- Content Diversification: Developing a new main page that will house multiple articles from various games, transitioning the current Cyberpunk-focused content to be just one of many featured analyses.
The development of InterfaceFire was divided into three weeks, with each week focused on specific tasks that contributed to the final outcome of the project.
Week 1: Conceptualization and Decision Making
- Generated and evaluated several project ideas, including personal portfolios, anime character websites, and game character websites.
- Finalized the decision to develop InterfaceFire, considering its meaningful impact and potential for growth.
Hours Spent: 2 hours
Week 2: Development and Content Integration
- Created the initial HTML and CSS files for the entire site.
- Conducted research by reading online documents for design insights.
- Collected data such as images and videos from Google to be used on the site.
- Drafted the content for the web pages.
- Prepared and conducted a demonstration presentation to showcase the initial progress of the project.
Hours Spent: 15 hours
Week 3: Refinement and Testing
- Refined the website design and content based on feedback and further insights.
- Performed accessibility tests to ensure the site meets web accessibility standards.
- Implemented additional effects such as image zoom-in to enhance interactivity.
- Made the navigation bar responsive to improve user experience on different devices.
- Drafted the final project report, summarizing the development process and outcomes.
Hours Spent: 4hrs
The InterfaceFire project significantly enhanced my web development and UX design skills, transforming from a simple idea into a fully functional critique platform for gaming interfaces. I chose this topic because I see its potential for further development. Future updates will focus on improving mobile responsiveness and expanding content diversity, with a strong emphasis on accessibility and user-centered design. Remember, start small but think big!