The current design and UX has been in place for quite some time.
Since we are currently working on a new React app and new infrastructure, it would be great to incorporate a fresh look and feel.
Steps to move forward:
1. Work on a wireframe with basic concept
2. Create multi-device design comps
3. Incorporate into a new Drupal 8 theme and enhancements to the React app
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | simplytest.me-V1.02.jpg | 672.22 KB | AJITH VARGHESE |
| #9 | simplytest.me-V1.01.jpg | 896.9 KB | AJITH VARGHESE |
| #6 | Mobile Portrait.jpg | 124.03 KB | anicoto |
| #6 | Mobile Portrait Advanced options.jpg | 150.34 KB | anicoto |
| #6 | Desktop HD.jpg | 267.88 KB | anicoto |
Comments
Comment #2
nerdsteinI've uploaded a wireframe from Sketch
And, here is the repo for the ReactJS work (I have one component in place)
I will be populating issues in the github issue queue.
Comment #3
matsbla commentedI think it looks cool, I like we can choose branch for each additional project.
I hope you also consider an option for #2939936: Increase countdown time back again to 24h
Comment #4
nerdsteinGit repo for the react project - https://github.com/nerdstein/simplytest-react-ui
Comment #5
volkswagenchickI would love to weigh in on the new UI and its functionality.
The option to manually install is wonderful.
Under Advanced options:
The ability to add the Drupal Core version and the version for additional projects is much needed.
It looks great and the added functionality will save time, especially for quick module evaluations or quick testing of patches. This will save time from having to chase down specific versions using the /admin/modules/install or loading up the tarball.
Even if the spawn time increases slightly, it would be worth the wait.
Would love to hear what others in the community feel about these additions.
Comment #6
anicotoWe have been working on a new UI Designs for the web site. I have uploaded final comps for desktop and mobile version.
I will be glad to receive feedback about the design, and I will try to include all the recommendations.
Comment #7
matsbla commented@Anilucoto
It looks very cool!
I guess the "Select option" dropdown will be hidden when none module is selected, and just be a list of available version numbers when something is selected?
But just wanted to say, great work! :))
Comment #8
volkswagenchickWow. The mockups look fantastic.
I feel there are some accessibility issues to address in the Desktop and mobile mockups. The color contrast of the help text on the background image is one issue. I will look this over again and give more feedback.
I also want to mention that the layout should have a well thought out order for screenreaders and keyboard only folks.
Comment #9
AJITH VARGHESE commentedI have worked on some new concepts for the website. I am uploading my designs here. I would love to get some feedback on the same.
Comment #10
nerdstein@ajith - wow, thank you so much! I really love the designs. They are fantastic and I really appreciate you spending time on this.
We had already begun rolling a new theme into a new, upcoming Drupal 8 branch based on the designs that @anicoto worked on. I didn't realize I left this issue open or that you would be interested in working on this.
As such, I'm going to file this issue as "fixed". @ajith, if you have any interest in helping out moving forward, we can consider incremental changes and other marketing-related collateral.
Comment #12
aCyborg commentedI think the designs are really nice!
I agree with @volkswagenchick that there are some accessibility issues worth addressing such as the color contrast in the header (and maybe the buttons). Especially with the advanced options open, it gets a bit hard to read/follow. I wonder if it would be as simple as increasing the blue overlay.
The spacing overall feels a bit spread out to me, it is hard for me to quickly mentally group the sections together. I would love to see how it would look if the titles were a bit closer to their associated text and if there was some additional space between sections, especially at mobile.
From a user perspective, what I assume is the sponsor/other people who have used it logos seems a bit out of place to me. I think it might make more sense to reorder the page and have the action stuff up top and the partners/sponsors a bit lower and with a label. Currently, it is a bit hard to parse what the logos are for.
I do appreciate how in @Ajith's version the "What" and "How" sections are grouped a bit more and the "Get Started' primary call to action section has it's own emphasized space, but I don't think changing that is necessary. It is just something to consider as it provides a clearer hierarchy and a more action-oriented layout.
Comment #13
kristen polClarifying the designs/images above as there has been confusion in other issues and chats about them:
1) While #9 captures the form fields from the wireframe in #2, the design is not inline with what they wanted
2) While #6 captures the design direction chosen, it does not include the new form fields shown in the wireframe in #2
TLDR: The design direction should come from #6 but the form fields should come from #2.