Where I'm at
In week 9 I wanted my site to be/have:
1. Asymmetrical use of space
I think my desktop site achieves this goal more, mainly because there's just more space. Being asymmetrical on mobile is more difficult as I don't want to make the information to small or unclear.
2. Whole screen menu
Yup, easily accomplished this goal for both sites.
3. Large, in-your-face type
I think the moving type on the homepages achieves this goal, but I wouldn't say anymore of my text is large or in your face, apart from the menu maybe. This goal evolved to suit the information and the rest of the design style though, so I'm not fussed that my type treatment is not so in your face.
4. Bright, energetic colours that are also grounded and not too much
I feel that this goal is well achieved. The colours are definitely bright and energetic, but I think the creamy background colour helps to ground it all. If I had left the background white, the colours would've seemed more stark I think.
Mega User Test #3
Feedback:
- line height on article pages could be increased
- log in pop up is better suited in yellow, not blue
- outline weight of all icons needs to be the same
- mobile button to filter on events page could be more obvious it's a button, maybe it needs an under rule or a little dot next to it
- header needs a background on the scroll so that it doesn't get in the way of other content
- the submit button on the comments page could be more obvious that it relates to the comments section
- the menu doesn't need hairlines, neither does any of the other buttons
- make the headlines the same size as the di logo so that they stand on their own without an under rule
- the image next to the comments should be smaller, also maybe circular
- use the circle icon more throughout the entire website
- the use of black means you haven't thought about it because black is the default
- add icons next to comment section, such as heart or reply
My thoughts:
I agree with a lot of the small detailing stuff brought up here, but I do not agree with Tristam that black is only there because it's the default. He would like to see more colour throughout my site which is fair enough, but I think it's just not true that black = I haven't thought about it. Nonetheless, I will trial his feedback and make a decision based on how it looks.
Here I have made the comment images smaller and circular, as well as putting the thumbs up and down icons there. Decided not to do reply because I don't want to encourage comment wars. People can just thumbs down if they don't disagree.
This is what Tristam suggested I do to my headings. I'm not completely against it, but I'm not sure that now is the time to be making a big change to my design style and system. In the end, the styling of the headers is not a big deal. I would like to incorporate more colour into my site though, so I'll keep working on that.
Using the circle more throughout the design. It's the same size as the menu circle which looks good when clicking the menu and the circle size and location stays the same.
Was going to use the circle around the bookmarks icons too but I think this drags the eye way too much for a button that is not necessary for functionality. It looks good though and would fit with the system.
Trying the chevron icons in circles too. Not sure about this for mobile, although it works on desktop (as seen below).
Trying to come up with a better format for the submit button, but it's hard because even the smallest change will be breaking the system that doesn't break anywhere else.
I'm going to go with this. The button is there, obviously part of the comment section, but it doesn't feel like it's trying too hard to be part of the same system.
Rationale
Di is a graphic design news website for a New Zealand based audience, but covers topics and events globally. I chose the design style to reference graphic design guidelines. For example, the horizontal and vertical rules pay homage to grid systems, as well as typographical and informational layouts. The background is neutral to give the yellow and black a feature, while providing a good level of contrast for reading. The whole site has an asymmetrical layout to convey dynamism and movement, as well as making it seem less traditional than a classic news site.
I aimed my site towards graphic designers, who are going to be the most picky on the design style, so I tried to keep it clean and simple, but with energetic colours and animations to engage. I chose a circle for the menu button to keep it untraditional and abstract. The text typeface is Acumin - this is a great font for easy reading, and because it is a sans serif, it gives the whole site a more contemporary atmosphere.
I have tried to lay out the information across the site in the most obvious and easy to navigate way possible, while retaining those important stylistic choices. I have used elements that people recognise, such as a profile picture to symbolise the login button, and a bookmarks icon to symbolise the ability to save. Because of this, all my user journeys are simple and uncomplicated to complete.
Figma Files Link
https://www.figma.com/file/1FXp25K2ngTQtJScwPSXcl/Graphic-Design-News?node-id=0%3A1
Final User Journey Documentation
Comments
Post a Comment