-Finished Beta Version

The site is finished! All the links are working, my girlfriend helped my with finding Q&A's out of interviews and I quickly made a link page.

So the beta version is up, if you have any comments to improve the site you can contact me: sarina@pinkssite.com

Enjoy the site!

It can be seen at www.pinkssite.com

-Putting up the pages together

Today I'm making the pages for the other sections, they're all different from sizes and content so it'll take alot of work.

The intro should start directly, and if you don;t want to see it I've made a button to skip the intro and you'll come on the home page directly.
At this time I made 5 pages and tested them in IE 6.0 and FireFox this all works just fine and I don't think that there will be alot of problems with other browers either.

-News

What’s a site without news about the person where it’s about?

My girlfriend helped me with searching some latest news about Pink, I chose to have it simple and short so people will directly know what’s going on, and sometimes with a small picture to make it look attractive. Of course with the date above it to see if it’s old or new content.

-Lyrics

Writing and listening, that's what I all did the last day’s fulltime working from 9 'til 3 in the morning.

The lyrics on the booklets or on the internet, are mostly wrong and totally missing out whole sentences that Pink sings. Those things make the songs stronger and understandable, that's why I wanted to write my own lyrics for the site. I'm glad I'm finally done because it took a lot of time(about a half an hour each song) but I think it was definitely worth it, though I'm sure everybody thinks I'm crazy by writing it into the last details.

-Video player

The video player is done, I wanted to keep it simple just like the other parts of the site and very functional.

I've had help with getting the video's in good quality and without logos or tags on it. The player automatically starts loading the .FLV video's in so it actually runs right away. I've made screenshots with the title from every single in the house style of my site, as a start to show people which single it is that they'll see when they press the play button.

-Intro

A catchy intro to show people what the site is about.

I wanted to make a "small" intro, otherwise people might just click the whole site off and that's not what we want. So to make a catchy, original and still simple intro, I chose to use Pink's voice and her fans clapping and cheering for the sound underneath the intro. This has been edited in Soundbooth and been put together into After Effects. Even if people do not have their music on it still should be appealing to watch it. I tried this by using words scrolling over the screen that has to tell something about what you can expect from the website. Still I missed something to make it more flashy and moving. I played around with pink colored lines and used the same quiet background as in the banner.

This all should do the trick for what I wanted to reach, it's not TOO busy and very attractive.

-Homepage and biography

Finally! The homepage of Pinkssite is made and the biography is written.

There is one page totally filled in and working, the main page. Now I have to find out how to make the menu and the other pages work best, since I want the music player to stay underneath the menu on every page.
The biography is one of those other pages and is totally handwritten and not stolen content from another site. This was a lot of work writing it since Pink did so much the past seven years. I wanted to keep the important information in it as short as possible and still keep it interesting and easy to read.

-Calendar and a music player

Yes finally done! I've made a calendar and a music player, with both of them I was struggling with "small" bugs that didn't wanted to be seen. Any other way they both work now and I solved them on my own.

For the calendar I had to make a list of events what pink all did the last seven years, this was a lot of work to find this all out, days fulltime working on this and our lady has been very busy in those seven years. Now the list I made contains her tours, supporting tours, special events, award shows, album/single releases and off course her own birthday. You can also search for an event because I've made a search function in this calendar so you can search for an event. Next to this calendar I made a smaller one for under the main page.

I wanted to keep the music player rather simple. You can hear her singles with a picture of the album and I want to keep this small player on every page of the site.

-CMS

A Content Management System(CMS) is an online system that manages the content of a website. Content such as: texts, pictures, audio and computer files can be uploaded, viewed, controlled, organized and eventually published on a website.

Well about a whole week I was busy following a 183 paged tutorial about a CMS, Joomla to be exactly. First I had to install PHP on my website otherwise I can't view or install the files needed for a CMS then I installed MySql which is a DataBaseManagementSystem for setting up a DataBase on my site which is also needed for a CMS. A Database is a structured collection of data that easily can be viewed, saved, changed or deleted.

Anyways, after installing all this I started to slowly install and then learn and test things with the actual CMS. After following the tutorial for setting up a CMS and what you can do with it I already tested the standard content in a standard template.

The next step was to make a template for the website with special bits of codes for Joomla to recognize in PHP, which I also hardly had learned. In the end this all went good but I had one problem because most parts of my sites are flash parts that calls for XML files to show the content and I can't change the XML files in the CMS, I asked Frank for help with this and he knew a PHP script which can solve this and how it could be solved.

In the meantime I can slowly go further building up the actual site.

-Website Status

Last week I started with slowly putting things together for the website, because I have all kinds of media that has to be in the site, this isn’t going to be an easy job.

The banner is made as a video and the menu has to overlap this video, under these two things you'll have to see the banner as a picture while the video loads, this usual takes about a small second so I choose to not make a preloader but I used a small picture instead.

You can see the website the way it is now at:
http://www.pinkssite.com/test.html.

-Last 1,5 week

Just a message to let you all know what I did last 1,5 week.
I worked the first three days of my “Autumn vacation” and took the last two days off to celebrate my mum’s birthday which ended up staying in the hospital with my granny whole day because things got really bad with her. The doctors found out that there were a lot of things wrong with her and she passed away the next day on Friday 19 October 2007, RIP.

We had to arrange a lot of things for the cremation and I wanted to make the invitation cards and an advertisement in the local newspaper "Tubantia". She loved to puzzle that’s why there are squares in the heart.
This is the invitation card:
This is the advertisement in the newspaper from last Friday:I was stuck on my project with putting things together and I totally wasn't focused on it anyways but I want to start again tomorrow to actually build the site, if my teacher is there to help me.

-Banner logo

Finally, my banner is done and it came out even more gorgeous than I thought it would be.

I wanted to make the logo in 3D which I did and let pink colored light shine behind it. I made the banner "alive" in After Effects with help from a few plug-ins. I tested the plug-ins a lot and didn’t want to make the banner too busy.

-3D logo

Here is the last render of my 3D logo.

It’s the logo of Pink, I firstly had to make a vector drawing from the logo in Illustrator before I could make it in 3D. It was a bit tricky with putting the lights right but I’m satisfied with the end result, mostly because I’m not good at 3D.

-Final Interface

After a lot of different styles, experiments I finally came up with the last and final interface.

The only thing what should change of this interface is the logo in the banner what should be made in 3D and come back in the intro. I choose for a nice beautiful/female font for the menu and submenu's and "Verdana" for the content so everyone can see that if I load it in externally. The menu went back to the kind of chaotic/play fuller one and I turned it into pink. I also finally get rid of the 9 pictures on the right side simply because it's not necessary on the main page and now there's more space for the latest news. As you can see I combined all the styles in this one, the music player stays on every page so I wanted to let it stand out a bit more.
I am totally satisfied with the end result and I don't want to change a thing anymore.
So watch here my last and final interface:

-Making of the interface

Here are my interfaces I made during the last weeks.

The first one is simple, I already knew how I wanted to build up the site because of the research and my sketches. I used two different fonts which also are used in her last dvd: "Live from Wembley arena".

-Second one:

Because I thought the submenu's were too neat for a person like Pink I get rid of them and changed the big menu into a kind of chaotic one.

-Third one:
I had help from a friend who is into web designing as well with this one and as you can see this turned out totally different. Because of the use of other fonts there’s a lot of space created. But I’m still not satisfied with this on either it’s too neat for Pink.

-Pinkssite.com

Last night I bought a domain for the website.

Because the site of Pink now is called "pinkspage" and actually it's not a page but a site, I thought of "pinkssite" directly. So the site will be based at:
http://www.pinkssite.com/

-Making of the banner

So I want to create a powerful, stylish and more likely a powerful website, the banner is the place for me to leave out my creative side.

-First I choose a picture of Pink which reflects her power of her music and personality, so I choose for this one and edited it in Photoshop:

-Then I played around with her latest logo (also in Photoshop), which I'll probably will make in 3D: -This is the end result of the banner so far:

-Sketches Flowchart+Interface

Here are scans of my flowchart and a sketch for my interface.

-This is my sketch for the flowchart of the site:
- A sketch from the interface/how I want the main page to look like:
Now I'm going to work this out on the pc.

-Research

Since I’m a fan of Pink for years I know a lot about her. I'm going to write the content of the site myself (the lyrics of the songs and the biography), I have to research the news myself everyday and I already have thousand of pictures from Pink on my pc mainly from her message board.

Of course because I’m a fan I already know the existing fan sites and how they look like so I don’t have to search them on Google. I picked out two fan sites and her official site to explain what I think is good about the sites and what’s not (design, font choices, the working of the site etc) and I’m going to use this information for my sketches which I’m going to make later on.

-First example.
I’m going to start explaining her official “page” because this is the one I want to improve. I made a screenshot of the site now:

http://www.pinkspage.com/

What I noticed directly is that it takes quite a while before the site has loaded, so I would make preloaders instead.
Now I’m going to say what I think about the looks of the site: The background which you first can see is pretty chaotic in the first place but when the site is loaded there’s not much left of it, the whole site overlaps the background. As you can see there are a lot of advertisements on the site, which is in my eyes ridiculous and cheap-looking for an official site about Pink. Certainly not something worthy of her weight, the design looks a bit like a Myspace layout (not professional, original or classy at all). The first look of a site is very important and I think a lot of people will click it away because it just doesn’t look good, it doesn’t attract people. The use of fonts and the site accents are balanced out as much as in the feminine aspect and the banner looks like it’s made in 5 seconds.

About the content: A lot of parts of the site gives errors so people can’t even see some parts at all. There are pop-ups for every picture, video etc what you want to see which is annoying. The pop-up for the music player on the main page is the worst, the site is online for months now and from the beginning there’s music from Nick Lachey on it though the title says it’s one of Pink her songs. The news was double a couple of times and totally isn’t updated at all. The events list isn’t right and a lot of events are missing. You can see ratings and stories from fans allover the site which is useless since all the fans are on her message board, writing their stories and loading their pictures up.
In total I can't say something good about the whole site.

-Second example.
This is a fan site called PinkBrasil. A screenshot of the site:

http://www.pinkbrasil.com/english/

When I come on this site I’m getting a pop-up with spam immediately but it loads fast and that is a plus point.
About the design of the site: The site overall looks good and because of the use of soft colors it looks like it’s in peace- maybe a bit too peaceful for this lady. The design of the banner really looks great and original but just like the navigation it's too big and blocky. The font use is standard, simple and like I said the one in the navigation looks too huge compared with the texts in the rest of the site (those are a bit too small to read).

The building of the site is easy: on the left side there are a lot of links- a bit too many and in the middle of the site stands the information with not making it boring to read by using pictures once in a while. If you click on index, pink, site or vote in the navigation the whole site automatically goes back in the language from Brazil which is a shame. The sections, gallery and forum are both pop-ups which is good because those sections are huge but I wonder if they couldn't build them in the site.
I think the navigation/site is a bit limited (I miss her music) and the content is targeted for fans and not for people who don't know who she is. But they keep the site up-to-date and the site works very well, I didn’t run into errors.

-Third example.
This is also a fan site but then for Germans called Pink Music. Here’s a screenshot:

http://www.pink-music.de/

My first impressions are that here are also Google ads and an advertisement to win a Meet&Greet even though the contest is over and that the site has loaded really quickly.
The graphics are really good, original and stylish but they are mostly taken over of the cover of her latest album I’m Not Dead. The fonts are simple but they fit with the design so that’s good. The navigation is easy and clear, though the content isn’t updated for a while which is a shame. As well in the tour section they only took the dates where Pink comes in German only, the whole site is build for Germans. You go through it really quickly and you don’t stay that long, the content is a bit minimal. A real plus point is the “music+video” section where you can listen to teasers of her music, I only miss that last touch in this case this is the lyrics of her songs.

-After the research.
I'm going to take all these points of my research with me to my sketches and ideas. I already have a bit of an image of what I want to put on the site and how it should look like(in my mind), so now it’s time to actually put my thoughts on paper and work them out on the pc. It should become a clean, personal site and keeping it up-to-date is very important. It should be designed for Pink, about Pink and no one else. I want the design to reflect the power of her voice and personality.

-Start of the making of

Welcome on my blog! This is the place where I write my progress about my graduation project in the last year for my education: Multimedia Design. I'm making this blog, so I can see for myself how my progress is going and for other people who are interested.

I choose for Authoring because that’s the closest direction to design which I'd love to do for my graduation project and because I’d like to learn about programming more. I’m going to make a website about the artist Pink and these are my intentions and reasons why and how I planned to make it:

My goal:
Pinkspage is the site about Pink. I’m a big fan from her for years, a couple of months ago her official site has totally changed and not in a positive way. So my goal is to make a site what should look and work better then this one. You can take a look at the site here: http://www.pinkspage.com/

My main ideas:
The site I want to make must become more personal, it should reflect the "Pink” feeling more, stand out the power of her voice and her personality, there should be much more information about her, the news must be up-to-date, the calendar up-to-date with her shows and maybe links to get tickets for them. If it’s possible a small shop for selling her albums and singles.

Target group:
Someone who is not a fan must be able to find the information of her concerning her music, the latest news, pictures, videos and they must be able to see where she is. For fans this all is important as well but I want to make a special category “Q&A” for them to get a more personal feeling.

The start:
To get people’s attention I start with a fast powerful intro. A neat welcome is always good to make people curious as well. The site must look attractive by the graphics I’ll make. Interactivity in the site is important so I think I’m going to make a banner in Flash that or changes in each different section or that it’ll make it moving a bit to keep the site a bit alive. Further on I don’t know how I will develop the site regarding the coding process, if it’s possible I want to load the texts and pictures externally. Furthermore the site must look simple and client-friendly, no nonsense, only information what really should matter!

Because my education is all about multimedia the following information media should come in the site:
- text
- sound/music player
- graphics
- pictures
- videos
- animations (fluent transitions or that the banner moves a bit)
- a bit 3D in the banner

Site developing:
- interface
- flowchart
- intro
- building the site step by step

Programs which I want to use:
- Flash
- Dreamweaver
- After Effects
- 3ds Max a little bit for the banner
- Photoshop
- Illustrator