Adding Styling to Screen Ideas

Since I couldn’t decide between my wireframe ideas for screens such as “Tips and Advice”, as well as “Bowel Movements”, I wanted to se what all of my ideas for them might look like once styling is added digitally.

Doing some quick, styled digital wireframes this way always helps me choose the best option, because I can properly visualise what the final outcome may end up looking like, when put beside the rest of the screens.

Tips and Advice

This was the screen I was actually the most unsure about, when it comes to layout. I wasn’t sure if I wanted to change up the tiles layout here or not. I also began by adding the same purple background to this as I have done with the home and messaging screens – however, I thought that perhaps the main thing that sets this screen apart from the others could be using a change of colour.

As I finished quickly designing some more possible solutions for this screen, I liked the idea of the third and fifth ones the most. I was thinking, though, that if I were to use the third option, I would actually have each row of squared tiles be for different sections (e.g. a row with article about abdominal pain relief, and below that, one for bloating relief etc.). These sections would contain different articles on each topic, and be explored using horizontal scrolling.

I also liked the final one, where, when you tap on a title, it expands down and allows you to flick through articles. The problem with this though, was that you wouldn’t really get a full overview of what’s available, and you’d probably have to tap a bunch of times before you found an article you wanted to read.

I then decided to develop the third screen idea. At first, I gave it the fixed elements and the tiles a blue shadow. However, this didn’t make sense as I changed the blue background to white. So, I decided to give them a grey shadow instead, and I think this looks much better.

Bowel Movements

This screen, I had ended up making one main idea at first, then I developed this further and further – making changes to each tile every time.

I thought the slider would be a new interactive element, and could be a nice change-up from the tapping. However, once I actually added it to the screen – I didn’t like it as much when it was shown against the rest of the bowel movement characteristics.

(note: please ignore the blue stroke around the tile on the first screen, as I was hovering over it before I took a screen capture).

I ended up liking the more rectangular buttons the most, as I realised I’d be able to fit a word inside of them – unlike the circles. This is something I wanted to include, as I want this feature to also be easily accessible to those with colour blindness as well.

Here is the final iteration of this screen: