Chatting With The Client – Floral Separators

The client sent a link to this Instragram page. He said he likes the borders around the pictures. See below for a close-up.
DuPree2 DuPree

The client said that Collin Dupree uses an app called Afterlight. I went to this page to have a look. I don’t have an iPhone so I was unable to download it and try it out. I asked a friend to download it onto his phone instead.2 The different parts of the website needed demarcation.

My first idea was to use this app to put pretty borders around the clients’ photos. It looked like this.

Here is another picture I put a border around to see what it would look like.
image (2)

This idea was a good one I think and I was feeling good about it but then I realised that I needed a line of demarcation between the different sections. At first I was going to use different coloured backgrounds. So for example, black, then white, then grey and repeat or something of this ilk.

I had a try using brushes to make a floral design which could be used as a separator. Here are the brushes I tried.


The results didn’t look good. It just looked unprofessional and messy. I didn’t save everything I did apart from this example below.

I abandoned that idea. Then I had the idea to use floral ‘wallpapers’ for the lines of demarcation. This meant that I had to stop using the floral borders around the images or it would be floral overload! So I chatted with the client and asked him what type of floral designs he likes. This was much better since a more uniform pattern looked a lot better than random brushes.

Here are the ones I ended up using. To make this one I had to copy and paste a part of the image and fit it together like a jigsaw since the original image was too small. I think this looks really pretty. I got rid of the blue one (see below) and swapped it with this one. It has more detail than the blue one.

To make this one I had to copy and paste a part of the image.

This one is the right size.
Flower Wallpaper Tumblr Hd 1080P 12 HD Wallpapers

This one is the right size.
Flower Wallpaper Tumblr Hd Background 9 HD Wallpapers

This one is the right size.

To make this one I had to copy and paste and fit pieces together to make a bigger image.
green seperater

Here are the ones that I considered using but decided against it in the end.

small blue


blue old pop

I swapped this one out for the purple one four days before the deadline because it isn’t very detailed. To make this one I had to use image trace in Illustrator. The original image was too small so I made it into a vector. This enabled me to make it bigger but detail was lost when I traced it. So in the end I abandoned it.

I didn’t like the texture of the background.

I tried altering it but it didn’t end up working out. When I copied and pasted the image it was obvious to see where the joins were.
b4bf671d76323ae8da8aa4a80b9974b0 2

I tried using Image Trace in Illustrator. It just looks blurred and messy. At this point I abandoned the idea.
pink (2)

I wasn’t totally happy with the image of the large roses with the green leaves on the white background. It reminded me of a photograph and didn’t match well with the others which were stylised and less realistic and detailed in appearance. I thought a good way to change it would be to use a filter. I think my client likes filters. I did a Google search and tried out the different filters.

I found this one below to be the best.

Here is a picture of college which I took a while back.
2013-09-27 08.27.56

Here is an example of what the filter can do.
16 05 14

Here I am trying out different filters.
dun3 dun4

In the end I decided on this look and I’m glad I did because I had a lot of positive feedback on it. I choose this one because I think the client will like the shabby chic look. The ones above look too bleached out.

Here are the final choices. I’m really happy with these choices since I’ve had so much positive feedback from my tutor and fellow students. I can tell that people are not expecting to see floral patterns like these as they look surprised and happy when they see them.

Decision Making For The Slider – Feedback in Class

So my first idea was to set out the home page to emulate one I had identified in my research.
jer lar

Here you can see I have left a space for the content. As you can see below, there isn’t much room so I abandoned my initial idea and decided to have just a slider. Keep it nice, clean and simple.
11 05 14

In class I asked for feedback from the tutor. I showed all the different options for the placement of the type so I could decide which one was the best.
DSC_0036 home studio 2 rows

DSC_0036 home studio

From all the feedback and from my own considerations, this is the final choice.

Options shown in class:

From all the feedback and from my own considerations, this is the final choice.

Options shown in class:
itunes 1

itunes 2 rows

itunes 2 rows top right

itunes 4 rows top right



itunes 4 rows bottom left


From all the feedback and from my own considerations, this is the final choice.

I hope this post illustrates everything I’ve been learning. I’ve been listening to my tutor and my fellow students and acting on their feedback. You can see here how my process has brought me to the right choice in the placement of the type for the slider.

Press This – flickr – Cool Rollovers

Flickr: SN_Studio’s Photostream.

I like how when I hover over an image a little transparent box appears. In the box there is a caption and the name of the account. On the right there are options to favourite, comment and zoom. I think this is really good.

I’m not sure yet if this would be needed on my site but I think its a neat and intelligent way of making the site interactive. By having all the options appear like this, it doesn’t ruin the nice clean, simple photo album layout. Well done flickr.

Fresh! –

I was passing the time reading the Mail Online. I came across this page and noticed the advert around the article.
frame idea

Since the page above is so full, here is the design without everything else. I liked this and thought it was worth putting on my blog. It was bright and cheerful and I couldn’t help but notice it. I was also interested in the white type which looks like handwriting.
frame idea

I did a search for TK Maxx to see if I could find further examples. Here is their site. Very neat and tidy.
tk max home

Close up.

Close up. This looks really pretty.

I clicked explore. This part is dedicated to ‘Me. By Me.’ One of the posts says ‘Post a photo of the colourful clothes you love in the comments for your chance to be in our next ad!’ People post photos of the clothes they bought at TK Maxx. These screenshots show what you see if you scroll down. More images with captions load as you scroll. It reminds me of summer and going on holiday which I think is the point since its nearly summertime. It looks eye-catching and the layout is tidy.
tkm1 tkm2 tkm3 tkm4 tkm5

Close ups. I really like the way they’ve done the borders. So clever and eye-catching.
STILLS_HUB8-488x690 STILLS_HUB25-488x690
The above from

When I returned to look at the site I noticed it had a different background every time. I really like this and think it looks great.
front page front page1 front page2 front page3 front page4 front page5 front page6 front page7 front page8 front page9 front page10 front page11 front page12 front page13 front page14 front page15
All of the above from

I really like the colour palate they’ve used.

I don’t think I’ll be able to use everything I’ve seen here because the client wants black and white. Imagine how it would have turned out if he’d wanted a lot of colour. I can use an accent colour though. I can also make frames in the same way they have here.

Photos from the Client – Ideas

The client sent me these two photos on 1st March, for inspiration. They are photos of a Catholic Encyclopedia.


I put this photo into Photoshop and used Image > Adjustments to make it brighter and to make the design stand out more.
20140304_102619 - Copy

Then I used the pen tool to trace around it. It took a long time!
untitled1 untitled2

I used Object > Transform > Reflect to save time.
untitled3 untitled4 untitled5 untitled6

Here I put the path into Photoshop and had some fun rendering it in different ways.
untitled7 untitled8 untitled9 untitled10 untitled11 untitled12 untitled13 untitled14
untitled15 untitled16

It was fun to try this out to see what it would look like. I don’t know if I’ll be able to use it yet. I want to try an ornaments font and find out what I can make.

Guidance in Class – Illustrator

I took the two print outs I mentioned at the end of the previous post and showed them to the tutor. The tutor advised me to look up Hedera.
Picture 1

I didn’t know what that was! Here is a close up.

The tutor reminded me about the spiral tool.
Picture 1

Then you can change the width and direction using this tool.
Picture 2

Here is the result.
Picture 2

I had a go.
Picture 1

He also advised I look up a font that contains ornamentsI have already used those in the past.

There’s a lot more to do here in terms of making some ideas. There is potentially a million different patterns I could create.

Update 27/02/14: I’ve had a text conversation with the client and he says he doesn’t want to use his name. He is thinking of going with the name Deleytha, pronounced ‘de lay the’. I said that’s fine and that the name would go well with the designs I’ll be making.

Update 28/02/14: The client has sent me a picture of this pencil rubbing.
Ive asked him to send me a photo of the original. I showed the tutor and he said it looked like a goat.