spyder-ide / ux-improvements

Discussion about UX improvements for Spyder 5 and beyond
4 stars 2 forks source link

New design for splash screen. #49

Closed juanis2112 closed 3 years ago

juanis2112 commented 3 years ago

Update splash screen to use the new logo and not use the photo that is currently used because it doesn't match the style of the logo.

juanis2112 commented 3 years ago

Ideas:

  1. Use a blurred screenshot of Spyder
  2. Use filled red
  3. Use a "cute image" For now we will go with ideas 1 and 2
isabela-pf commented 3 years ago

Hi there! Here are some simple ideas for Spyder splash screen that should fit better with Spyder’s UI. Because voting for logos is still open upon posting this, I’m using a messy rectangle stand in for now.

First are the simple, color only backgrounds (2 in the previous comment).

Option 1-1

0-12

Option 2-1

I liked this design with some different color combinations, so I’ve included them as the following three options.

0-11

Option 2-2

0-4

Option 2-3

0-6

Second is using a photo for some additional texture. I’m just using a stock image as a placeholder right now since I remember hearing that there might be a certain Spyder photo you wanted to use. (1 in the previous comment)

Option 3-1

0-16
juanis2112 commented 3 years ago

We like option 1-1

Things to try:

  1. We would like rounded corners for the rectangular shape
  2. Splitting the screen into two colors: white + red. (Try both Texture and NO texture for the red part)
  3. Splitting the screen between filled color RED (with the logo) and image (maybe Spyder screenshot)
  4. Trying different shapes for the splash screen (not a rectangle)
isabela-pf commented 3 years ago

These aren't all the options requested above, but here are a few of the ideas I made while we were meeting.

Option 4-1

This splits the screen between two colors on an angle. I like the lighter background for the logo since it makes is feasible to use the full-color logo (still showing placeholders for now, though!).

1-24

Option 4-2

This is 4-2 with an abstract texture for the red fill. This is one way to add a little more depth to a simple design but not be too heavy-handed by putting code everywhere.

1-29

Option 4-3

This is the requested split screen between red and a Spyder screenshot. As I mentioned in person, I think the red and blue of the screenshot have a similar amount of darkness that makes them blend together. It's not my favorite, but I will try some other options for this idea as I fill out some options for the next round.

1-33
isabela-pf commented 3 years ago

Here's a few more options I've cooked up!

Option 4-4

This is both an alternate shape (suggestion 4 above) and a different texture that could be applied to other shapes as well.

2-43

Option 5-1

There was also interest in include an image in a different way. Here's one idea (using images edited and combined from the Spyder readme and unsplash). Depending on what we end up with, I can either try and shoot a similar image or we can use and credit the original.

2-47

Option 5-2

In terms of adding an image, this is my personal favorite. It is also a slightly different shape since the top of the image is cut out.

2-45
isabela-pf commented 3 years ago

5-2 was the popular choice at the last meeting, but the team asked to see some variations on it. Using the same photo (and the updated logo), here are a few similar choices.

Option 5-3

This is 5-2 with the updated logo and slightly heavier font for version number!

3-48

Option 5-4

There was a request to see how this would look without the side of the face in the shot. With this image in particular, I think it looks empty and it would be tricky to edit in other items to fill the space with the perspective.

3-49

Option 5-5

There was also a request to see this design in a more horizontal shape. I went back to my initial ratio of 2:1 while keeping the same photo (and extending it). Once again, this photo looks more empty in this case.

3-51
isabela-pf commented 3 years ago

I'm back again! At our last discussion there was interest in seeing basically 5-3 with different photos. I have a few options with varying amounts of human, screen, and different background elements since those were some of the points of feedback. If we do end up using any photo, I'd want to credit the photographer in the about like we do with the icon sets we pull from.

(All of these could probably use a touch of clean up if they are the ones we want to go with.)

Option 5-6

Source

4-64

Option 5-7

Source

4-65

Option 5-8

Source This option is unusual in that it has far less screen/Spyder visible, but with all the comments about different backgrounds I wanted to include this as a very background focused alternative.

4-66

Option 5-9

Source

4-67
isabela-pf commented 3 years ago

I've gotten some more feedback to share the above option 5's without the diagonal cutouts to return to the rectangle. Here they are!

Option 5-10

5-3's full image.

5-72

Option 5-11

5-6's full image.

5-68

Option 5-12

5-7's full image.

5-71

Option 5-13

5-8's full image.

5-70

Option 5-14

5-9's full image.

5-69
juanis2112 commented 3 years ago

And the winner is... 5.11