This website is all about my music and because I write my own songs, I want to have music player on the site so users can listen to my songs.
I found very good music player on codrops (click here to view original music player!)
After more than 3 hours of studying codes of how this music player works and how to input it into my website, I finally got it work on my website!!!!!!!
As you can see on the screen shot, I added some of my songs into it and made them work, rest of music player is from original version of it but I’m going to change it in near future.
My lecturer’s advice while working on PHP website was to make sure that the site is functional before we start to make website look nice. So that’s what I did. After layout was all done and I was happy with it, I created contact form for sending emails from the site.
I opened contact.php and typed in this code.
It is what you need for making contact form looking like this –
However, this does not make the contact form working. To make it work, I had to create another file called send.php and type in this code:
This tells contact form what to do, where to send emails and what reply will user get after sending an email. Contact form would not be working without it.
If you would like to make contact form looking fancier, you need to do it in CSS style sheet. (I will talk about it later on)
I decided to work on the music website first.
I set up file structure and started to work on the layout.
This is the final layout of my site:
As it is PHP website, I had to upload it to server to find out if it works so I used my current website to test it on.
After 3 days spent planning the layout and colour schemes, I’ve finally designed layout of the websites!
As you noticed, the layout is exactly the same with different colour scheme.
All uni work in first semester is done and I finally have time to work on my own projects that I’ve been wanting to work on for long time but university kept me very busy!
Task I set myself up for next 3 weeks:
- Design a new personal website + make it responsive
- Design a new music website for my music projects + make it responsive
- Recap PHP and MySQL
Fingers crossed so I get most of it done until semester 2 will start and I’ll be busy with uni work again.
If you’re interested in my work, keep looking at my blog for updates…
Overall, I am happy how the whole video project turned up in final stage.
When you read first ideas written down on paper and then watch the video in the final stage, you will realise that a few ideas how to film it were changed. I think that the final version of the video is even better than I planned it to be in the beginning of the project.
This is plan of the layout for my website about children’s healthy eating designed in Adobe Photoshop CS6 –
This is colour scheme that I decided to use for my website:
The reason why I chose this colour scheme is because after research about colour meanings, I found out that green is colour of well being, health and this is exactly what the site is going to be about.
Site map – navigation
For navigation, I was planning on having main navigation consisting of Home, 0-5, 6-15 categories
and sub-navigation for every category.
Site map for main navigation
Drawing – main navigation + sub navigation
However, sub-navigation would have to be scroll down navigation and because of tablets and mobile phones it is not good to use scroll down menu. So my plan would not work and I had to think of alternative plan.
I had a look at a few websites and I came up with a solution that I think it’ll work but it took me a long time thought.
I will use only main navigation as I planned in the beginning and then I will design something like this and use it as link to other pages –
My version of it
The website that I’m going to design is going to be a static, which means designed with HTML,CSS and Java.
I was considering if to make it adaptive/responsive because a lot of people use different devices for browsing internet these days. It would be very helpful to be able to just find a recipe on your mobile when you’re in a kitchen and in rush and need to prepare a good meal for your kid but then it came to mind that this task is more about actual design and user experience and adaptive/responsive design would destroy it; it would simply not work. I could design different designs for different devices but that would take me a lot of time and I do not have it because of other work I have to do for modules.
When step 1 (research) was all done, I needed to find out what types/designs of websites are already out there to find out what I need to include in my website and what to do better so my website is unique and not like rest of the website on internet. That’s why I had a look at design of different websites. Most interesting ones were only 3 sites and that’s why I decided to get ideas from them.
The design of this site was amazing, I liked it a lot. It was playful and colour scheme was just great. In navigation you can choose age categories so content suits to what you’re looking for; for example ‘in the kitchen’ – cooking methods, preparation, food safety
‘meals’ – breakfast, lunch, snack, dinner
This is what I’d like to use on my site – two different navigations and colour scheme and also green line across the full screen.
Design of this site was very interesting as it wasn’t too complicated (simplicity). I liked colours of navigation and footer of the site that’s why I’d like to do something similar on my site.
This site was very playful and nicely designed. The layout didn’t change it was only content of the site. This is what I’d like to create on my site.
Overall, looking at different websites game me an idea how my website might look.
- I want to make it more serious than playful as a target audience are parents of children (finding after doing a deep research)
- main navigation + sub navigation
- line across the full screen
- footer with navigation + social media icons
- colour scheme: white background and green or blue colour