Design new "temporary" frame and background for browser

[guylepage3]

Issue/resolution breakdown from initial redesign

1. The "current" browser layout looks broken as it was designed for either a "mobile" or "frame-to-frame" viewport. At the time of the "redesign" the goal was that we were going to remain inside the browser for 1 or 2 sprints max so the "frame-to-frame" design was accepted by the team. RESOLVED

2. But we have since then determined that the move to a "stand alone macOS Menu Dropdown Frame" was going to be a considerable amount of work and testing. RESOLVED

---

Today's issue/resolution breakdown:

1. The team then determined that the "frame-to-frame" layout would not work in the long-term and we needed a quick solution to push the new "redesign" out the door. So we pulled in the "frame-to-frame" layout to more of a "mobile-like" framing. This presented quite a few UX issues such as profiles no longer looked "card-like", navbars were stretched and became cumbersome, etc...

Today's Solution:

Design new temporary frame and background for browser.

• We then made the decision to frame the app at the "true" mobile width as;
  • It was thought it would be a far better UX with the "current" stretched out "frame-to-frame" design
  • We need a quick solution as we are moving to the "mobile" stand alone "webkit" macOS Menu Dropdown as soon as we can

[guylepage3]

❗️**ATTENTION:**❗️
please be aware that the actual build will be 2x larger than what you're looking at in the designs as the designs are made for my super high resolution monitor

---

Design 0.17 40a - browser-macos-40a-profile-d17

Design 0.17 40b - browser-macos-40b-profile-d17

Design 0.17 40c - browser-macos-40c-profile-d17

Design 0.17 40d - browser-macos-40d-profile-d17

Design 0.17 40e - browser-macos-40e-profile-d17

Design 0.17 40f - browser-macos-40f-profile-d17

Design 0.17 40g - browser-macos-40g-profile-d17

Design 0.17 40h - browser-macos-40h-profile-d17

---

❗️**ATTENTION:**❗️
please be aware that the actual build will be 2x larger than what you're looking at in the designs as the designs are made for my super high resolution monitor

[yknl]

I like the look and feel of b, d and g but I do have some concern about the usability of this setup.

1. It feels like we're removing much of the advantages of a larger screen by shrinking everything down this much. Correct me if I'm wrong but I think we're only doing this for aesthetic reasons? It feels a little weird to have something like this running in a full screen browser window.

2. The mouse cursor would have to be within the mobile-sized frame in order to scroll, which makes it a little bit annoying. But that might just be me.

Perhaps we can go with a tablet-sized frame or just reduce the width slightly from the current size and leave it at full height. (Until we transition to the native webkit view)

[guylepage3]

Thank you for the feedback @yknl.

but I do have some concern about the usability of this setup.

Let's keep in mind that we have made the decision to do this because..

1. It's a far better UX with the "current" design than stretching it out
2. We are moving to the stand alone "webkit" macOS Menu Dropdown as soon as we can

Correct me if I'm wrong but I think we're only doing this for aesthetic reasons?

No. Addressed above.

[guylepage3]

The mouse cursor would have to be within the mobile-sized frame in order to scroll

No. I don't think we should require that.

Also, please be aware that the actual build will be 2x larger than what you're looking at in the designs as the designs are made for my super high resolution monitor

[larrysalibra]

I like the darker background b & d - they really make the browser pop. The lighter ones distract my eyes from app.

I share @yknl’s concern. I worry that it would feel claustrophobic- having said that it Would be great to try it out and see how it feels at the size it’ll be in my browser before passing judgement.

I think d in particular looks hot! Great work @guylepage3!

[guylepage3]

Thanks a bunch @larrysalibra.. 👍

I share @yknl’s concern. I worry that it would feel claustrophobic- having said that it Would be great to try it out and see how it feels at the size it’ll be in my browser before passing judgement.

I mean.. I do as well but do be aware that it will appear larger on 98% of all screens. I accidentally designed the views on my super high resolution monitor size. Sorry about that.

Let me provide a quick layout that 90% of the general population will see.

[guylepage3]

Alternatively we can have larger screens keep going below the fold as well. I'll mock this up now.

[guylepage3]

Design 0.17 40a (1440x900) - browser-macos-40a-profile-d17

Design 0.17 40b (1440x900) - browser-macos-40b-profile-d17

Design 0.17 40c (1440x900) - browser-macos-40c-profile-d17

Design 0.17 40d (1440x900) - browser-macos-40d-profile-d17

Design 0.17 40e (1440x900) - browser-macos-40e-profile-d17

Design 0.17 40f (1440x900) - browser-macos-40f-profile-d17

Design 0.17 40g (1440x900) - browser-macos-40g-profile-d17

Design 0.17 40h (1440x900) - browser-macos-40h-profile-d17

[guylepage3]

@larrysalibra @yknl, here's a more accurate view of how the majority of users will see the browser.

[larrysalibra]

This is a huge improvement over what we have now!

[guylepage3]

@larrysalibra I feel like it is as well. Not close to great but better and with minimal work to execute.

@yknl @shea256 @muneeb-ali Thoughts?

[yknl]

I think this is better for sure.

[shea256]

I like the white background and the blue gradient background. I don't like any of the ones with dots because they seem to distracting.

[guylepage3]

@yknl @shea256 @larrysalibra

Cool. Then let's go with...

Design 0.17 40f (1440x900) - browser-macos-40f-profile-d17

I'll get to this tomorrow at some point. Thanks everyone. 👍