As I think I mentioned in a previous post, I am toying with the idea of having some images in my survey with serif fonts, and others with sans-serif. This is because, as I will detail a little bit more in an upcoming post, the whole "sans-serifs are a rule for screens/actually it's OK use serifs" debate seems to still be largely unresolved. My personal feeling is that I can use a serif font for the body text, however there is supporting literature for both sides of the argument. Since I shouldn't base a design intended for other people entirely on my own opinion, I hope to gauge some helpful feedback from the survey.
The typeface I used for most of the banner headers here is Bebas Neue, and the body font is Chapparal Pro. Since Chapparal Pro is a serif, I felt it had a friendlier "tone" to it and that it could complement the style of the illustrations.
In pages that are intended to be modal windows or similar, the illustration was kept centre and annotations usually placed on either side. In the example above, the essential points of the subject matter are both on the same side of the page, so in cases like this text is placed under the image. I am attempting to "preserve" space at the bottom, because this app will be viewed on an iPad in a landscape orientate which means that the iOS navigation bar would pop up at the bottom if activated. Putting content too low on the page would interfere with this.
I was quite into having the boxes at the bottom in a dotted line, but my supervisor pointed out that this meant there were too many dotted lines in the layout and the eye would get a bit confused. Since the dotted lines are used in a semiotic sense to indicate a link or an idea, it doesn't actually make so much sense to have them as bounding boxes. I may, however, use the same style of bounding boxes as seen lower down this post, because I feel that they are a good "anchor" for the text.
The examples shown here are what the dotted line could be used for - linking things together that are not physically or explicitly linked as is.
In some earlier illustrations, I use white dotted lines to outline areas of the brain that are highlighted. To me this adds a bit of depth so I am planning to keep it. In later text implementations, I kept the linking line white too - perhaps if I try iterating the images to include this the link between information and text will be a visually embedded a little further.
I was advised to remove the "tab" look as seen above as it didn't suit the navigation, but was happier with the contrast the paler box provided against the text. This led to me eventually creating bounding boxes for the text in the same value of white (70% opacity). See this further down the page.
In the example above, I started trying to frame key words and establish a text hierarchy through use of bold font and darker hue of grey. It was decided that black type was too heavy and stark on the page, so a muted grey would be used instead as there is still adequate contrast against the background. The words also "float" on the page a little, which may mean that some information gets lost without a shape or backdrop to ground it. In the image below, I tried to see how a (obviously a bit off-kilter!) bounding box would look. While a singular box highlights an important piece of information, I don't feel that it guides the eyes in the direction I want them to go, as it is nearest the bottom of the page.
The family tree layout came about from trying to link the illustrations together by something that suggested a connection, rather than a proper line drawing elements together.
The same layout was applied to the "about this course" section, as seen below.
The how to guides were a little different and took a few attempts to arrange. Even now I'm going to have to look back and re-shuffle, looking more at Gestalt theory, readability and saccades of the eye (in relation to how long each line of text is).
I tried out different headers when I got to this stage, as I was really sick of the banner look and was wondering if it even fit with the rest of the visuals. The first change I briefly played with, before deciding against it, was a white and (surprise) dotted line border. I decided that it didn't really work, as compared to the rest of the rounded shapes it was very sharp and looked out of place. This could have been solves by using a rounded square, but since this is the same shape as the bounding boxes of text there may have been confusion with visual hierarchy as both header and body text would have had similar "anchors". As I spoke about in an earlier blog post, the "step 2/3/4" navigation button will not be staying, as it is distracting text on the page and a small list of numbers in the corner would easily display what stage the user is at in the step-by-step process.
This title was an experiment following a tutorial I did during a slump, but I ended up liking the clean look so much I kept it. The cross-hatching (also part of the tutorial) adds a bit of a crafty look, which could compliment the stitched look that the white dotted lines lend to some of the diagrams further up the page. This font is Futura Medium in caps, which is one that you can't really go wrong with.
As in some places the body text was placed quite far apart, linking arrows help literally guide the eye from one step to the next. The shapes of the arrow complement the circular illustration anchor so I feel at the moment there's a nice movement.
The header is quite stark compared to the body font, but I feel that at the moment it keeps it quite refined and means that the central components are the illustration and the informative text.
No comments:
Post a Comment