logo UX Design -- Updated 2021/10/27
Back to Snerx -- Contact us on our official Discord. ______________________________________________________________________________________ :: Design Principles ::
- Plaintext Accessible - All interfaces are setup in such a way as to be easily readable in plaintext format in a terminal. This is to ensure that reading content in raw format will still render it properly and in an immediately-sensible modality. This also ensures that content will render properly on small screens, with 64 characters being the target width. Ex: /curl - Max Depth Two - All content is only ever one layer deep. This means that all category of content in a system and all particular pages for all content are all listed at the most superficial layer of the system (e.g. the Snerx landing page lists all projects with immediacy). All relevant content is accessible from the entry-level of the system and any selected content in the second layer gives full access to that topic/class/project/framework. Exceptions to this on Snerx are /snews and /snuff, as these are UI experiments. - Standalone Integrity - All content must be accessible as stand-alone files. Snerx uses in-line CSS so as to make all pages self-contained and downloadable to be viewed offline. All systems must adhear to this principle: software made portable, projects zip'd, and pages in-line. - Standards Compliance and Compatibility - Trying to ensure ubiquity of availability and usability of a system is difficult, but constant review and augmentation can make a system fit for most environments. An additional code validator and automated regulation or conditioning of documents makes this process much easier. For example, the Snerx webserver uses validator.nu to check for standards compliance (and when to break compliance) and a dead link checker for reports regarding site usability. - Flat/Minimal/Material Layouts - In order to fit as much information as possible into a space and have the space still be easily parsed by the human eye, it must not look busy or cluttered. This is easy to acheive by removing borders, frames, outlines, shadows, dividers, and even color-coded backgrounds. Standardized spacing between all sections, bodies, and workspaces is more than enough for segmenting content and partitioning your visual real estate. Reduction and 'flattening' of an interface will always increase its ease of use. - Two Color Schemes For Two Color Functions - While Snerx has multiple color schemes, there are two in particular that should be implemented into any system. One is for optimal visibility in all environments and for all screens including damaged or low-light screens; this should be the default used for any important interface and is always grayscale with black in the background, white in the foreground, and mid-tone grays as highlights (exemplified in /snuff). The second scheme is for obscuring information on a screen; a light flat-tone color scheme (desaturating the image should return all the same values of gray) makes it very difficult to read. This acts as a screen-mask and stops people from being able to cognize the information from a distance unless they maintain gaze for extended periods of time or have a direct view from a centered position (usually obscured by the user). An unfinished example of the latter, with 'washed' or 'faded' colors is given below.
Arch Antium Rice :: Details ::
An example of a well-laid-out interface is EVE Online's interface. EVE Online has an incredibly high learning curve and yet people who have never heard of it before can visually parse all the information on the screen. All information you could ever want is displayed on the screen by default - all relevant objects in the area are listed, all comms channels are listed, all fleet/crew information listed, and windows for specific tasks or interactions are comfortably fit between the rest with plenty of space left over to see the 3D-mapping of ships with objective distances. Additionally, the edges are gapped, made clear for the object-icons to pan into, which is very useful because it means no objects in the area are ever off-screen. On this, the icons used by EVE are flat. Icons and indicators used in compressed visual systems or systems meant to be highly-parsible (meaning that cognizing the relavent information is immediate for humans) need a standardization and intuitiveness that puts it on the level of apodiction. The best example I know for this is /snarl.
:: Resources ::
Miscellaneous resources: Currated list of articles for how to design almost any UI element. Graphagos - genetic algorithm AI used to generate user interfaces. Nik.Bot.Nu - Most robust wallpaper scrapper in terms of functionality. Stylus/Userstyles - Custom CSS for any site (get rid of white backgrounds). Waifu2x - Image upscaler using AI (zoom and enhance). Gigapixel AI - Better image upscaler, but not free. Unixporn - Primary listings of. Minimal Dark HD - GUI overhaul for Aseprite. BetterDiscord - Discord ricing and functionality plugins. BetterDocs - Themes & Plugins for BetterDiscord. My Linux Dotfiles. My Linux Scripts. My old project for ricing Win7 and Arch. Custom CSS for Volafile. Draw terminals with slop and select_st. Beeple's free C4D packs are great for videos. Material/flat UI example. For making and analyzing color pallettes: Coolors Terminal Sexy Paletton Color Hex Color Conversion Algorithms For generating background patterns and wallpapers: Site Origin's generator (used for everything on this site) Trianglify (for triangle patterns) Patternizer (for stripped patterns) Color theory: The Munsell color system, and a visual graph. Color blindness tests and schemes. Each pallette below is designed around some image or aesthetic and has five colors. There are always: 2 Background / base colors. | Tone and grounding. 1 Divider / organizing color. | Spatial division & parsing. 2 Foreground / highlight colors. | Text-content & draw-focus. Example - Grayscale Example - Saturation Ancient - Fountain Ancient - Library Ancient - Wall ArtDeco - DecoPop ArtDeco - FakeDeco ArtDeco - InlaidWood ArtDeco - SilverStone Citypop - TennisCourt ModernPop - OceanOrange Vaporwave - Anime Vaporwave - NeonPalms Vaporwave - WashedRetro
:: Miscellaneous ::
I'll edit the rest of this later. More examples, more pictures, etc. End goal is unified interface for Space Force or BuildTheEnterprise.org.
Sniph GUI