Sorry that this is so long. You will see by my poor, little story board that I didn't expect this to be as long as it is, but it kept growing. I have coached a lot of soccer from preschool to travel and if I get it right, I would like to send this link to my new parents of the younger ones to help explain things at the start of each season. My intent is to now use this as my storyboard for my website. I am pretty happy with the layout, but I think I might try to take my own picture if the weather cooperates and use it as my background. I will be adding more photos to the website, but this will suffice for the interactive portion. The menu on the left links to all the pages (I may add one or two more). I have changed the hyperlink color from blue to white as I am testing if I like the blue better for the overall color (which I don't think so, but check it out on the 2nd receiving page). Would love feed back on whether to keep this white or go back to blue. I did a color sheme magenta also matched with the green, so I kept that as the used color. On the website there will not be multiple pages, but longer ones for Receiving,Passing, etc... Also, my plan is to have links to documents on the Rules, Position, and Passing pages. When you click on one of rules, position or types of passes it will load a document in a similar format that explains that rule or pass in more detail. That is why I included Balls and fields. They will not be webpages, but documents. For the sake of time I decided not to create all the pages here. I also hope to add more pictures on the website and links to YouTube for videos that have drills. Any feedback would be welcomed.
I think this looks great. Your photos are very nice and your layout is very clean and consistent. The only comment I have is that there is a lot of green. On some screens, the information you want to highlight is competing with the background.
ReplyDeleteI agree, there is a lot of green, but I don't mind it. I also agree that your text competes with your background. It's hard to read because of the lack of contrast. Also, in your explanation, you said the pages would be longer. I would definitely break up the text more. Big blocks of texts are a challenge.
ReplyDeleteI think I understand the blue vs. white question... If you're hyperlinking with an underline, then people expect blue text to signal the hyperlink. However, for contrast purposes, if you have an underline, then I think people will understand what to do with the white hyperlinked text. For the navigation on the left, I would change the color of the box that the page shows just to emphasize the navigation and not use underlines.
It also seems like you have different alignments for each page. Perhaps reusing just a few layouts with consistent margins would help with making the pages cohesive.
I really like the action shots. If I were a parent, I think those would motivate me since I'm probably involved for my kid(s). I hope the weather cooperates for you, because pictures are definitely an asset! I agree that video would also be helpful for drills and things. Your ideas to make it very visual match what you're trying to communicate. I hope all of that works out, because it supports the parents AND the kids :o)
Your menu buttons are cool, I dig the shape, but I think it's distracting and busy in this already busy design. I would err on the side of simplistic text-based menu items so that the "content is king" on your pages.
ReplyDeleteThe bullet points on your 2nd mock should all be the same.
I agree with Emily, and prefer the white links to the blue, as they also match your page heading font color. And I think the Magenta works for used links, but the gradient on the buttons makes the magenta text hard to read in places.
I'm not sure what the buttons are for at the bottom right. You mentioned the pages would have lots of content on them, so I assume the page would scroll… if you'd rather not have a scrolling page, then the buttons for navigation should look similar to your left menu item button styles (and if the menu items are purely text-based, then the navigation can be text-based as well).
If you use a border around a photograph, then I suggest using a similar border around a table, a graph, a drawn picture, etc. Treat all media similarly, if you can.
I really like your idea, and the use of photographs to portray this activity for parents and kids. It looks very informative and inviting! I like your idea about the image background, but suggest using an in-focus image with a black semi-transparent overlay instead of a blurred image with a white semi-transparent overlay. That might help bring the content to the front of the page, and keep the background in the background (as Shannon said, the information is competing with the background).
Thanks for all the feedback. I will stick with the white for hyperlinks and work on the magenta. Iwill also look into underlining, as that is a good suggestion. The buttons at the bottom are just for the ppt and won't be on the website. There was so much info that I put these here for people to go to the next page. On the website people will most likely have just the links on the left to navigate, if that clears things up. I agree that the background is too busy. I will try to get a better picture this weekend when my kids play. Not sure how to do an in-focus pic.with a transparent overlay, but will work on it. Or I may go simple background and keep my buttons, since I like them.
ReplyDeleteEmily, what I mean by the pages will be longer is that on a PPT you only have so much room, but on a web page I have bit more freedom to make it a little longer. Also, I will be linking to other pages when needed. Will try to reduce the green a bit, but I do like it, as green fields mean soccer to me.