Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX Redesign Proposal #122

Open
junebug12851 opened this issue Aug 18, 2020 · 0 comments
Open

UX Redesign Proposal #122

junebug12851 opened this issue Aug 18, 2020 · 0 comments

Comments

@junebug12851
Copy link

junebug12851 commented Aug 18, 2020

Overview

I like your website but I feel it's UX could be much better. I spent the day mocking up a new UX redesign which you may or may not like but I felt I could throw it out there in case the community liked it. Feel free to adopt whatever you like out of it, it's a little rough and it's not perfect but I've really come to love it and it's my hope you will as well.

Mockup

Here's the whole page
WholePage

and here's the initial view assuming a resolution height of 768
FirstView~768

Details of changes

  • I mocked it up using a 12-column grid to make it easy to implement
  • My initial mockup is based on a desktop monitor that's between 1366x768 - 1920x1080 which I felt developers visiting the homepage might be the most used option. Other resolutions and mobile options can certainly be mocked up as well.
  • I re-arranged things to visually guide the users from the most important elements to the least important elements in a way I hope brings a great UX for everyone
  • I added icons, spaced things out, and organized everything so a user can quickly jump and find exactly what they're looking for
  • I tried to follow the latest UI trends users have come to love
  • I resized your snapshots to 1080p using Photoshop's new AI resizing feature so that it doesn't get blurry or blocky and preserves details. Game snapshots look better at 1080 especially if this is an advertising point your site makes. (I also exported them to be only slightly bigger ~50KB to keep UX in mind)
  • I tried to add in data you might be able to scrape from Github, these can be re-worked or dismissed if your not interested but add a lot to the overall UX and design
  • I removed a lot of clutter and redundant wording
  • I created a color palette based on your logo and decided on a monochromatic color palette with a light-theme
  • It appears your blog carries news-related content to the project and is important to you to feature so I renamed it from "Blog" to "News" and designed a quick logo for it given it's importance.
  • Much of the blog post details like author, category, etc... I thought might work better visually on the same blog-post which frees up visual clutter on the Homepage
  • I renamed "Code" to "Github" since I feel it may add more clarity and maybe spark extra interest
  • I used a flags icon-set which needs attribution but provides gorgeous icons that fit nicely with the theme

Color Palette

This is the color palette I used cutesy of Paletton which aided me in generating it
image

1080p Game Screenshots

As mentioned above, these are your game screenshots resized to 1080p using Photoshop's new Artificial Intelligence resizing feature so that it appears more natural at the larger size and not blocky or blurry.

LargerScreenshots.zip

Dolphin News Logo

This is the quick logo I drafted up to help your blog standout better under your brand and place it on a pedestal given it;s importance to Dolphin related News and to help it work good with the UX.

logo-news

I hope you like it

Like I said, it's just a bit rough and needs some smoothing and you may not like it but you're free to adopt whatever you do like. I had a lot of spare time today so I wanted to mock up something real quick and see what you guys think of it.

EDIT:
I forgot to mention the background image will ideally animate and allow the user to toggle through it manually with the buttons. Each image has a feature text above it like in the image I presented. These are the ones I planned to go above the dots in each image. This encourages people to thumb through, look at each image, and see features as they thumb through in a way that doesn't impact UX.

  • Full 1080 Graphics with Enhancements
  • Joystick Compatibility
  • Turbo Speed
  • Networked Multiplayer Support
  • Many More Features...

EDIT 2:
I also forgot to link the the flat UI icons which require attribution but work very well with the theme and UX

https://www.flaticon.com/packs/countrys-flags

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant