Announcement

Collapse
No announcement yet.

Web App Design

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Web App Design

    Hello, everyone!

    I need your help with designing a gorgeous, intuitive, and cohesive user interface for a modern web application that will tie together the vast majority of the community features for the new UT. In the past, communities relied on third party software and a bit of elbow grease to make things happen, but what's great about the new UT is that we can start fresh and do things right from the beginning. We know what to expect this time around, and we have the tools and the technology to make it happen!


    Primary Goal of this Thread

    I'm hoping that if I map out the entire web application structure, the many extremely talented designers involved with UT will work together to come up with a visual design for the aforementioned gorgeous, intuitive, and cohesive user interface. At the bottom of this post is a table of the app structure, which should be used for reference and is of course subject to change, so it will be updated as we go along. Please don't hesitate to contribute any and all ideas for features and functionality, regardless of whether or not you're a designer or developer.


    Primary Goal of the App

    Keep people engaged with the game in real-time from any (modern) device. If you can imagine some practical, useful community feature, you will almost certainly find it within this app: friends, foes, followers, stats, leagues, tournaments, rankings, ladders, clans, servers, matchmaking (pickup games), maps, modes, mutators, weapons, pickups, you name it... all of this information linked together as one cohesive system.

    If this sounds like a lot of work, that's because it is. Luckily, most of it is already completed! All that's left is the user interface design and hooking the game into it for some live data. Adding any custom functionality should be a piece of cake. After that, just like the game itself, we need plenty of feedback so we can iterate and get this thing polished.
    Last edited by timbur; 01-27-2015, 05:46 AM. Reason: clarity
    Creator of NewNet for UT99

    #2
    The following technical details and screen captures highlight the app's current functionality:


    Component System

    If you're familiar with Unreal Engine and the actor model, this should come naturally to you. Everything within the app is an interchangeable component. Players. Weapons. Stats. The app itself. Everything. This has all kinds of benefits, but I'll just list the main ones:

    • Developers don't have to worry about any lower level stuff. Simply generate the component's contents and you're good to go.
    • Custom properties take seconds to add. Updating, saving, etc. is all automatic. Want a custom way to display or edit that property? Add a single method to your JavaScript.
    • Every component has its own permissions. Designated viewers. Designated editors. Password for viewing. Password for editing. All optional of course. Defaults to public viewing, private editing, with you as a designated editor.
    • Everything is generated on the client. And everything uses the same predictable REST API. You can also perform any number of custom queries against said REST API.



    Everything Automatically Linked

    Just to give an idea for how everything flows, let's start with what we have so far for a TDM match overview:



    Now let's scroll down and hover over some player names. You'll see some extended info pop up for each player. This same pop up is available for every linked component, as mentioned above: weapons, servers, clans, stats, etc., etc., etc.



    And of course if we click on a player's name or icon, we're brought to their profile:




    Editing Components

    If we tap the CTRL key, we can toggle edit mode. It looks something like this:



    Note: If you're in the production environment, you'll be prompted with the option to enter the development environment. You should always edit things in the development environment. You can run, save, and deploy your changes at any time from within your browser.


    Site Structure

    When in edit mode, you'll see all the different directories within the app on the left, as well as the components' controls for essentially every component on the page.

    Note: Every navigation item (i.e., (sub)directory) can be added, cloned, renamed, moved, or removed with the push of a button, and the app's routing (URL) always automatically corresponds.
    Last edited by timbur; 06-23-2015, 12:49 PM.
    Creator of NewNet for UT99

    Comment


      #3
      The following technical details and screen captures highlight the app's current functionality (cont.):


      Tool Tips

      There are tool tips for almost everything. If there is some property being displayed, it almost certainly has a tool tip for elaboration. And if you're able to edit the property, there will often be an indicative icon. The following screen capture shows the basic functionality of every component upon viewing its information: permissions, ability to follow, approve, and/or trust its code.



      When in edit mode, you'll see applicable controls at the top left of most components placed within the page as items (widgets) in a list. These controls allow you to remove the item, move the item, and/or open the component editing tool for that item.



      And if you were to click the "Edit JS" button for that item, this code editor would appear:



      Note: You can of course edit the code and run it immediately within your browser. Anyone with that component loaded will be notified of your changes and given the option to immediately run the changes as well.

      Bonus: Adding a chat widget to some page is as simple as this:




      Categorizing Information

      As mentioned previously, you can add directories and subdirectories within seconds, and there is a strong correlation between the component system and the actor model. So what's the best way to structure this web app as relating to the game? Use essentially the same class hierarchy! For example, the weapons page is designed to display information for any component tagged "utWeapon". And in the following screen capture, you can see that the "utShockRifle" class extends the "utWeapon" base class, and extending or cloning the "utShockRifle" class would be as easy as clicking the respective button within the component search box seen at the upper right.



      Furthermore, this class hierarchy helps everywhere. For instance, we want to track kills, deaths, hits, and misses for every weapon, so it wouldn't make sense to implement this functionality for each individual weapon. Weapons would inherit said properties as well as the stats generation methods, and then for example, the "utShockRifle" might have its own extra properties and methods for combos or boosts.
      Last edited by timbur; 06-23-2015, 12:50 PM.
      Creator of NewNet for UT99

      Comment


        #4
        I'll be updating this particular post as we solidify the app's structure.


        Web App Structure w/ Features List

        There are a handful of things that need to be done before I can open the app up to the public, but in the mean time, I need your help with determining the best possible look and feel for everything! Implementing your ideas shouldn't be a problem as long as they make sense, so don't hold anything back.

        The following table outlines the anticipated application structure in its entirety. It probably seems kind of overwhelming at first, but most of it just copy and paste with a few minor variations. It's an incomplete list, but hopefully it will give a good idea for how everything needs to be linked together and possibly point us in the right direction for the web app's aesthetics and functional requirements. I'm interested in your version(s) of this list, and everything is of course subject to change, so again, any and all ideas or suggestions are welcome!

        |-- Index
        |-- |-- Home
        |-- |-- |-- Slideshow for latest events?
        |-- |-- |-- Status
        |-- |-- |-- Instant action
        |-- |-- |-- Favorite servers?
        |-- |-- |-- Favorite game modes?
        |-- |-- |-- Stats overview
        |-- |-- |-- Latest matches?
        |-- |-- |-- Latest awards/achievements?
        |-- |-- |-- Aggregated feed of friends, clans, following, etc. w/ ability to filter
        |-- |-- |-- Friends + status and/or chat?
        |-- |-- Profile (fairly similar to Home but specific to selected player)
        |-- |-- |-- Basic info (name, images, status, etc.)
        |-- |-- |-- Follow, approve, trust buttons
        |-- |-- |-- Latest matches (screenshots? demos?)
        |-- |-- |-- Awards
        |-- |-- |-- Achievements
        |-- |-- |-- Activity + Comments (filterable?)
        |-- |-- |-- Chat
        |-- |-- |-- Teams/clans
        |-- |-- |-- Following players, teams, mods, maps, anything else?
        |-- |-- |-- Shareable config
        |-- |-- |-- PC specs
        |-- |-- |-- Need a nice method of drilling down into individual player stats, match history, etc.
        |-- |-- What else belongs within the Index?
        |-- Servers
        |-- |-- Maybe start with a list or grid (names/logos) sorted by most popular or favorites? Drill down for specific info from there?
        |-- |-- Profile
        |-- |-- |-- Basic info (name, images, status, MOTD, maps played, etc.)
        |-- |-- |-- Game modes/mutators available?
        |-- |-- |-- Follow, approve, trust buttons
        |-- |-- |-- Latest matches (screenshots? demos?)
        |-- |-- |-- Admins? Moderators?
        |-- |-- |-- Live feed
        |-- |-- |-- Chat
        |-- Maps
        |-- |-- Maybe start with a list or grid (names/logos) sorted by most popular or favorites? Drill down for specific info from there?
        |-- |-- Profile
        |-- |-- |-- Basic info (name, images, status, times played, etc.)
        |-- |-- |-- Follow, approve, trust buttons
        |-- |-- |-- Author(s)
        |-- |-- |-- Top players?
        |-- |-- |-- Overall stats?
        |-- |-- |-- Latest matches (screenshots? demos?)
        |-- |-- |-- Used in tournaments/leagues/etc.?
        |-- |-- |-- Weapons/pickups available?
        |-- |-- |-- Live feed?
        |-- |-- |-- Chat
        |-- |-- |-- Change log
        |-- |-- |-- Comments/suggestions
        |-- Game Modes
        |-- |-- Maybe start with a list or grid (names/logos) sorted by most popular or favorites? Drill down for specific info from there?
        |-- |-- Profile
        |-- |-- |-- Basic info (name, images, times played, etc.)
        |-- |-- |-- Follow, approve, trust buttons
        |-- |-- |-- Author(s)
        |-- |-- |-- Top players?
        |-- |-- |-- Overall stats?
        |-- |-- |-- Latest matches (screenshots? demos?)
        |-- |-- |-- Active tournaments/leagues/etc.?
        |-- |-- |-- Extensions available?
        |-- |-- |-- Weapons/pickups available?
        |-- |-- |-- Live feed?
        |-- |-- |-- Chat
        |-- |-- |-- Change log
        |-- |-- |-- Comments/suggestions
        |-- Weapons
        |-- |-- Maybe start with a list or grid (names/logos) sorted by most popular or favorites? Drill down for specific info from there?
        |-- |-- Profile
        |-- |-- |-- Basic info (name, images, status, times played, etc.)
        |-- |-- |-- Follow, approve, trust buttons
        |-- |-- |-- Author(s)
        |-- |-- |-- Top players?
        |-- |-- |-- Overall stats?
        |-- |-- |-- Latest matches (screenshots? demos?)
        |-- |-- |-- Used in maps/tournaments/leagues/etc.?
        |-- |-- |-- Extensions? Extension of?
        |-- |-- |-- Live feed?
        |-- |-- |-- Chat
        |-- |-- |-- Change log
        |-- |-- |-- Comments/suggestions
        |-- Pickups
        |-- |-- Maybe start with a list or grid (names/logos) sorted by most popular or favorites? Drill down for specific info from there?
        |-- |-- Profile
        |-- |-- |-- Basic info (name, images, status, times played, etc.)
        |-- |-- |-- Follow, approve, trust buttons
        |-- |-- |-- Author(s)
        |-- |-- |-- Top players?
        |-- |-- |-- Overall stats?
        |-- |-- |-- Latest matches (screenshots? demos?)
        |-- |-- |-- Used in maps/tournaments/leagues/etc.?
        |-- |-- |-- Extensions? Extension of?
        |-- |-- |-- Live feed?
        |-- |-- |-- Chat
        |-- |-- |-- Change log
        |-- |-- |-- Comments/suggestions
        |-- Mutators
        |-- |-- Maybe start with a list or grid (names/logos) sorted by most popular or favorites? Drill down for specific info from there?
        |-- |-- Profile
        |-- |-- |-- Basic info (name, images, times played, etc.)
        |-- |-- |-- Follow, approve, trust buttons
        |-- |-- |-- Author(s)
        |-- |-- |-- Top players?
        |-- |-- |-- Overall stats?
        |-- |-- |-- Latest matches (screenshots? demos?)
        |-- |-- |-- Active tournaments/leagues/etc.?
        |-- |-- |-- Extensions available?
        |-- |-- |-- Applies to what?
        |-- |-- |-- Live feed?
        |-- |-- |-- Chat
        |-- |-- |-- Change log
        |-- |-- |-- Comments/suggestions
        |-- Matches
        |-- |-- Latest?
        |-- |-- Drill down by game mode or something?
        |-- |-- Instant play (should be pretty straightforward)
        |-- |-- |-- Basic info (server, game mode, map, etc.)
        |-- |-- |-- Rules
        |-- |-- |-- Mutators
        |-- |-- |-- Spectators
        |-- |-- |-- Players
        |-- |-- |-- Admins? Moderators?
        |-- |-- |-- Live feed
        |-- |-- |-- Chat
        |-- |-- Matchmaking (pickup games)
        |-- |-- |-- Basic info (time, server, game mode, map, etc.)
        |-- |-- |-- Rules
        |-- |-- |-- Mutators
        |-- |-- |-- Follow, approve, trust buttons??
        |-- |-- |-- Spectators
        |-- |-- |-- Players
        |-- |-- |-- Admins? Moderators?
        |-- |-- |-- Live feed
        |-- |-- |-- Chat
        |-- |-- Match overview
        |-- |-- |-- Basic info (time, server, game mode, map, etc.)
        |-- |-- |-- Rules
        |-- |-- |-- Was it for a tournament/league/ladder/etc.?
        |-- |-- |-- Next map? Previous map?
        |-- |-- |-- Mutators
        |-- |-- |-- Follow, approve, trust buttons??
        |-- |-- |-- Spectators
        |-- |-- |-- Players
        |-- |-- |-- Admins? Moderators?
        |-- |-- |-- Live feed
        |-- |-- |-- Chat
        |-- |-- |-- Demo?
        |-- |-- |-- Final scores
        |-- |-- |-- Graphs
        |-- |-- |-- Sprees
        |-- |-- |-- Weapon stats
        |-- |-- |-- Comments
        |-- |-- Player overview (specific to match)
        |-- |-- |-- Basic info (time, server, game mode, map, etc.)
        |-- |-- |-- Live feed
        |-- |-- |-- Chat
        |-- |-- |-- Final score
        |-- |-- |-- Graphs
        |-- |-- |-- Sprees
        |-- |-- |-- Weapon stats
        |-- |-- |-- Comments
        |-- |-- Weapon overview (specific to match, maybe unnecessary?)
        |-- |-- |-- Basic info (time, server, game mode, map, etc.)
        |-- |-- |-- Live feed
        |-- |-- |-- Chat
        |-- |-- |-- Graphs
        |-- |-- |-- What info can be displayed?
        |-- |-- |-- Comments
        |-- Leagues/Tournaments/Ladders
        |-- |-- Maybe start with a list or grid (names/logos) sorted by active and/or most popular? Drill down for specific info from there?
        |-- |-- Profile
        |-- |-- |-- Basic info (name, images, matches played, etc.)
        |-- |-- |-- Follow, approve, trust buttons
        |-- |-- |-- Rules
        |-- |-- |-- Maps
        |-- |-- |-- Game mode
        |-- |-- |-- Mutators
        |-- |-- |-- Weapons
        |-- |-- |-- Organizer(s)
        |-- |-- |-- Admins? Moderators?
        |-- |-- |-- Spectators
        |-- |-- |-- Players
        |-- |-- |-- Top players?
        |-- |-- |-- Calendar
        |-- |-- |-- Availability
        |-- |-- |-- Scrimmages (maybe just incorporate into pug system)
        |-- |-- |-- Overall stats?
        |-- |-- |-- Latest matches (screenshots? demos?)
        |-- |-- |-- Final scores, brackets, etc.
        |-- |-- |-- Live feed?
        |-- |-- |-- Highlights?
        |-- |-- |-- Awards?
        |-- |-- |-- Chat
        |-- |-- |-- Demo?
        |-- |-- |-- Graphs
        |-- |-- |-- Sprees
        |-- |-- |-- Weapon stats
        |-- |-- |-- Comments/suggestions
        Last edited by timbur; 01-27-2015, 02:59 AM.
        Creator of NewNet for UT99

        Comment


          #5
          cool.

          Comment


            #6
            Wow this is looking great timbur. To bad i dont really know how to help in this area of work otherwise id give some advice. Anyways cant wait to see this implemented

            Comment


              #7
              Wow this looks amazing.
              http://www.twitch.tv/drestz

              Comment


                #8
                Originally posted by Unreal GAKO View Post
                Wow this is looking great timbur. To bad i dont really know how to help in this area of work otherwise id give some advice. Anyways cant wait to see this implemented
                Thanks!

                At this stage I'm mainly looking for ideas for information to incorporate and how to structure it (page-wise). Any input there is helpful!
                Creator of NewNet for UT99

                Comment


                  #9
                  Great work! I believe this system is a must have for this game. It makes it easy to access and stay connected to the game even when you arent playing it. How about twitch links via the app to view matches in progress?

                  Comment


                    #10
                    I wrote this for mobile app but I'd like to share it anyway. (: Thread: https://forums.unrealtournament.com/...WP-and-Android

                    Originally posted by Tycerax View Post
                    So, what will this app do? Simple version, your calendar/schedule. Long version is...

                    01 - Profiles. It will show you your profile, stats, milestones / achievements, friends, etc. This is not why the app is there but it's nice to have these things where you can throughly look. You can look at other players' profiles too.
                    02 - Chat. You will be able to chat with your friends (single or with group), clan or globally on multiple tabs instantly. Therefore you can be with your team when you want it.
                    03 - Streaming. You will be able to (video) stream events and/or matches. There will be a detailed system (like multiple cameras, bets, etc.) in-game (as far as I've seen) but with a handheld device, I think a video stream is sufficient.
                    04 - Schedule & Upcoming Events. Perhaps this is the most important part of the app. You can see what event is right around the corner or your next match with your clan. You can modify entries (integration with chat is required (will be explained later)) to your hearts content.
                    05 - Epic Marketplace.
                    06 - More features will be added...

                    Schedule & Chat integration: This is a feature that I'd love to happen if this idea will be done. You should be able to share events (clan or global) with your friends & clan and you should be able to share global events globally. A marker (like &event) should bring a dropdown menu to the sender and the sender should choose an event to share. Receivers get the event message color-coded (green for already attending / red for not attending / yellow for awaiting response) and when they touch the colored area, they get a small pop-up right above the text with the details of the event (what, when, (if clan match) with) and with options (attend, don't attend, ask later, (if ongoing streaming event) watch, add to schedule / event list).
                    Tiny Details That Should NOT Be Forgotten & Dynamic Arenas & UT4 Storyline - Story Design & Gametype Designs: Volleyball - 3-Way CTF & Smartphone/Tablet Integration

                    Comment


                      #11
                      Thanks, Tycerax! The app will definitely work on HTML5 compatible mobile devices!
                      Last edited by timbur; 01-30-2015, 02:29 PM.
                      Creator of NewNet for UT99

                      Comment


                        #12
                        Really, really cool. Looking forward to seeing how this plays out.
                        Unreal Carnage.com UT4 Maps: DM-Maelstrom DM-SpaceNoxx

                        Comment


                          #13
                          Wow, simply amazing looking and very professionally presented. This maybe a bit far reaching, and not sure how it would be implemented, but given that there is going to be a lot of cool map music out there, I would love it to have a player that plays UT music on the app as well (from your favorite maps etc.)

                          Also, if you need any sound work done for your app, let me know (interface SFX, etc.)

                          Great job!

                          Comment


                            #14
                            Originally posted by MaxCarnage View Post
                            Wow, simply amazing looking and very professionally presented. This maybe a bit far reaching, and not sure how it would be implemented, but given that there is going to be a lot of cool map music out there, I would love it to have a player that plays UT music on the app as well (from your favorite maps etc.)

                            Also, if you need any sound work done for your app, let me know (interface SFX, etc.)

                            Great job!
                            Thanks! A music player sounds like a fantastic idea. It should be relatively simple to implement. I was thinking it would be cool to have some kind of visual representation of the music built into the app, possibly some subtle background color changes or something.
                            Creator of NewNet for UT99

                            Comment


                              #15
                              you mention live feed, what do you exactly mean by that ?

                              and two features that might be nice to have and are also shown in CSGO:

                              you can get current live feeds of matchmaking matches. Each match shows at what rank its played. This could be handy for new players to learn how to get better



                              and the current streamers streaming UT. this will also allow for new players to learn and it will allow for UT to get more viewers. This will also promote UT to the crowds

                              Attached Files
                              http://www.twitch.tv/drestz

                              Comment

                              Working...
                              X