Jump to content

Which layout looks better?

maxib7

Sign Up: The first one. I don't like the check mark button (it might even confuse some people) and the card is superfluous, the app looks cleaner without it.

 

Student Planner: The second one. No cards if you basically use the entire width of the screen.

Link to comment
Share on other sites

Link to post
Share on other sites

i would prefer the second one . Looks like an android screen. Just add a sign up option. 

Link to comment
Share on other sites

Link to post
Share on other sites

Second

00110000 00110001 00110000 00110000 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110001 00110001 00100000 00110000 00110001 00110001 00110001 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110001 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110000 00110001 

Link to comment
Share on other sites

Link to post
Share on other sites

Sign Up: The first one. I don't like the check mark button (it might even confuse some people) and the card is superfluous, the app looks cleaner without it.

 

Student Planner: The second one. No cards if you basically use the entire width of the screen.

 

You know after doing a lot more thinking I think you're right. The card in the sign up seems inappropriate. Here's a quote from google's material design spec

 

"A card is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject."  (http://www.google.com/design/spec/components/cards.html#_

 

 

It is an entry point for more information, so a more appropriate use would be on my main screen where I have things like this (It's not done yet but it will have information and stuff on it)

3yblsI9.png

No... I'm not ready for my thread to die, not yet.... nooooo......

Link to comment
Share on other sites

Link to post
Share on other sites

Why use cards at all? There is nothing to the left or right of your content, not even free space, so there is no need to separate anything.

Link to comment
Share on other sites

Link to post
Share on other sites

Why use cards at all? There is nothing to the left or right of your content, not even free space, so there is no need to separate anything.

 

On the contrary I think the use of cards on my main screen are entirely appropriate. They are displaying unique content in a list of items and they don't need to have things to either side of them.

 

See google's example here: 

components_cards_content3.png

No... I'm not ready for my thread to die, not yet.... nooooo......

Link to comment
Share on other sites

Link to post
Share on other sites

They're not doing it in Hangouts or the Youtube app. So I guess it depends on the content. Are these items so different that you want to separate them by using cards instead of a simple line?

Link to comment
Share on other sites

Link to post
Share on other sites

2nd, it will save lot of space

Desktop:

CPU : i5 4440 | Motherboard : Gigabyte B85M-D3H | RAM : Kingstone HyperX blu 4GB x2 | GPU : Asus R9 280X DC II Top [RIP 2017] | PSU : Corsair VS 550W | Display(s) : Dell S2240L | Mouse : Logitech G400s | Operating System : Windows 7 64bit

 

Laptop:

Acer Predator Helios 300 (CPU: Intel Core i5 7300HQ | GPU: GTX 1050ti | RAM: 16GB RAM | Operating System: Windows 10 64bit)

Link to comment
Share on other sites

Link to post
Share on other sites

They're not doing it in Hangouts or the Youtube app. So I guess it depends on the content. Are these items so different that you want to separate them by using cards instead of a simple line?

 

In the hangouts example that's a long list of extremely similar and most importantly short information. When you have a quickly scan-able list the only reason cards aren't used is because it distracts the eyes from the meaningful content.

See google's example here from there material design spec page:

LdNLbRf.png

link: http://www.google.com/design/spec/components/cards.html#cards-usage

 

Also here is another example from the same web page that shows an example of appropriate card use

8d7tux3.png

 

You'll notice that the cards are large enough that they can display information without drawing the eyes away from the content.

 

Now I see what you mean when you look at my main page right now. The cards don't hold anything but two lines and yes that would be inappropriate then; however, I'm not yet finished and when I'm done it will hold an array of dynamic, expandable content. It will, when I' m finished, have more than three lines of content filling it. 

 

Which on Google's material design spec page, they say you should use a card layout when displaying content that "[w]ould otherwise be in a list but needs to display more than three lines of text."

 

 

Also Youtube does use cards. They use it on their website. In their app, however, they can't use them because the information is so close together that it would cause the eyes to look at the spaces between the cards rather the content in the cards themselves

 

 

 

 

Now with that being said material design is not a how to guide nor is it a strict set of rules that everything you do has to follow. It is a philosophy that is meant to give you a theme to strive towards when you design things. There are many different ways to do things in material design and it is up to that individual designer to decide how it will look. They give us a spec to describe the rules to us and let us go on our own to make things. 

No... I'm not ready for my thread to die, not yet.... nooooo......

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×