Website research - Portfolio website

Website research

Portfolio website

http://karmaagency.com

This website has a very simple design layout.  I like how the design uses the image as the background, and how the design follows a simple colour scheme. The typography in this design is very simple and varies between serif and san serif.

www.razvangarofeanu.com

This is another example of a very simple design. The only imagery used in this design is the designers logo which acts as a focal point. The design also uses a simple colour scheme using just the two colours blue and white. 

http://saltsurf.com

In this example i like the use of whitespace in their design, with the border around the page and using this simple images for the background. Which is what i wanted to incorporate into my design.

http://nickshanekearney.com

In this example i really like how the design has created a simple logo and really would like to incorporate this into my website design. Another thing that i like about this design is the simplistic colour scheme of white and blue.

www.letstravelsomewhere.com

A lot like the last website example this design has used a square in the centre of the image to showcase their name. This is simple but effective which is what i wanted to base my website design on.

http://www.brooklyngin.com

Again this is another example of a simple design that uses a border around the website. I really like the design of the logo in this website and the vintage style that it has.

http://jimramsden.com

I find this design interesting as it uses a unique layout. Another thing which i like is the colour scheme that uses white, black and green. This colour schemes used throughout the website. 

http://circlesconference.com

I like how this design is much different to any websites i have seen, having almost like a magazine look too it.

http://folksverona.com

You cant see this with the screen shot but when on the actual website the background is a video. This is both eye catching and intriguing into what the website is about.

http://www.thebasicswebdesign.com

I love the use of negative space and how simplistic this website design is, what is what i really want to base my design on. Another thing which i like about this design is how you can scroll down instead of clicking links.

http://costaazulnatal.com

Again like the folks website this design uses a video for the background giving you a look into the website and catching your attention. Another thing which i like about this design is how the links are placed beneath the logo, positioned to the center of the page.

This is a mood board of all the features i liked from the research.

Creating my website

Creating my website

Home Page

I decided to start off my website by scratch, starting of with the header/border for the top of the page.

To add my links list onto the page i made an unordered list, and added an a href so that in the future i could add links to them.

I wanted to have the home button hilighted so that it is easy to see. It is quite simple all you have to do is put a Div around the words HTML and using CSS you can add a border, change the colour etc.

I decided to add a search bar so i found a website that provided a standard HTML and CSS search bar template. Using CSS i made a couple adjustments to make the bar look how i wanted it to.

I moved the title 'PoetrySlam' so that it is higher then the menu bar so that when the page is resized nothing overlaps. 

I played around with the fonts, seeing which looks the best.

Template Evaluation

For my website template I was given a ready made basic template to modify, however I decided to start my template from scratch as it would be easier me to set out the design the way I wanted, and gave me a chance to expand my skills.

My template consists of a header that includes the company name/logo and the navigation bars.  I then added an image for the central part of the site where my slide show will be placed. To finish off I decided to create the footer, this included the search bar that I was able to take the HTML from a website, which I then modified using CSS. I did then added links to social media sights and me template was finished.

Creating the template overall was quite challenging, however after going looking back at code academy and with the help of CW3 schools I was able to gain skills, helping me create my template.

To move on and improve my website I need to embed my downloaded font so that it can be seen by others on a variety of computers. Also I need to create a slideshow that will take the place of my image. After I complete those two tasks I just need to touch up on everything and focus more on the actual design aspect of my website.

The next thing i needed to do was embed my font. Using google fonts i was able to find a font that i liked and was easily able to embed the font.

The next thing i had to do was add a slideshow. Finally i was able to find a  slideshow on flex slider, I simply followed the instructions given and was able to create this slideshow. 

After getting the slideshow onto my website it was time to add some modifications. And to start i wanted to change the background of the slideshow. For this i looked back at the slides CSS unit i found the tag for the background image, which i was able to change by pasting in my own image url.

I was able to add the testimonials by adding an extra Div, adding an header and paragraph. With this i was able to create a border in CSS and arrange the text.

Here you can see i had a problem with the search bar and social media, merging with the slide show.

However using the CSS code position: absolute i was able to move the search bar and social media around the page.

Final page.

About

For my about page i took the social media and search bar from the home page

Using a simple <h1> and simple CSS i was able to add a header and change things such the size, font, and colour.

I added a paragraph to the html with the content for the about page.

I was able to center the text by adding text-align to center. 

Next i added these images to the page using image src.

I found that the image kept moving behind the text.

however using the style tag i was able to again use position: absolute and move the image to the right.

I found that when on the about page the home button was still lit.

However to change this i gave the about link a class, and using CSS i was able to move the home button border to the about button.

Events

The events page was pretty simple, started off by copying and pasting the social media and search bar html. Then using the <h1> and <p> i was able to quickly add in the title and content.

Finally was to put the images in using image src.

Gallery

Making the gallery i started off with the title using a <h1>, making slight changes to the colour and size on CSS.

I added the images using image src, and positioned them using position: absolute.

Brochure

For the brochure page i used <h1> to add the title, and copied the search bar and social media buttons html. Finally all i had to do was use img src to add the image, and using CSS position the image with position: absolute.

Contact

For my contact page I started off with copying the social media buttons and search bar from my previous html. Next using the <h1> and <p> I was able to add the header and content, which I was able to modify using CSS.

I thought that my page was looking a little plain so using img src I added in a image

Adding pages links

Too add the links to the different pages firstly i had to make sure all the pages were placed in my website folder. Next using <a href> i was able to link the pages to their names.

Final Evaluation

With my template finished it was time to start adding to the template and build my website to meet the demands of the client. 

To start off i needed too find a way to embed my font so that people would be able to view them. After searching around i found that you can actually embed you fonts using google fonts, simple by copying and pasting the link given into my html head.

The next thing that i had to to what add a slideshow which i mentioned in my template evaluation. This was most defiantly the hardest part of this task. After trying out many slideshow i finally found a slideshow on felxislider, in which i was given a template slider that i had to add into the html. The hardest part was linking the javacript to my html especially because there were four different sections. With the template slideshow working i was able to modify the slideshows CSS such as the background and the slides images. After a little research I was able to add the testimonials by adding an extra Div, adding an header and paragraph. With this i was able to create a border in CSS and arrange the text.

After adding my slideshow i had a problem with the search bar and social media, which was merging with the slide show. However i was able to move the search bar and social media around the page using the CSS code position: absolute to move the two down.

My home page was now created and overall i would say that the page has meet all of the required demands from the client and is presented in a suitable manner. Although to improve i think i could of thought about experimenting with the layout a bit more.

Next it was time to create the other pages, starting off with the about page. I was able to take the header, social media and search bar html from the home page and paste it on the about page, which was quick and easy, giving me a basic page template. Using the <h1> tag i added in the title of the page and using CSS i was able to play around with different fonts, colours and positioning. 

Next i added in the about content using the basic <p> tag. Although i did have a problem with the text aligning to the left, after a little research i was able to overcome this problem with adding align: center to the CSS. Another problem I found that when on the about page the home button was still lit,however to change this i gave the about link a class, and using CSS i was able to move the home button border to the about button. The page looked a bit plain so i decided to quickly add in a few images using img src, however I found that the right image kept moving behind the text. I was able to add a style tag and use position absolute to move the image right.

The about page was finished, overall i would say that i did encounter a few problems while making this page that i was able to overcome and make the page look presentable. However to improve the page i could of played around with more fonts to make it more interesting.

The events page was next, and i started off by copying and pasting the header, social media and search bars html. Like in the about page i added my title and content using the <h1> and <p> tags.  however i did find that i couldn't get the text to separate between each line. After playing around with the html  found that if i put each event into a separate paragraph tag it would space out each sentance. Again like the about page i found that the page was a bit empty. Using ing src i was able to add the two photos tom either side of the text using position: absolute.

With the events page finished i would say that overall, the page is simple but eligible and easy to understand. although to improve i could of used a table for the events.

Gallery is next and was a very quick page to make. I started off by again copying the header, social media and search bars html. Next was the title, using the <h1> tag and CSS. I added the images using image src, and positioned each individually using div’s and position: absolute.

The gallery page was now finished and overall i would say that the gallery page is clear and everything fits nicely into place. however to improve this page i could of added something to enlarged the images when clicked or a second slideshow.

For the brochure page i used <h1> to add the title, and copied the header, search bar and social media buttons html. Finally all i had to do was use img src to add the image, and using CSS position the image with position: absolute.

This was the easiest page to create as it didn't need a lot of content and overall i would say that this page is clean and does its job by giving the viewers the brochure. On the other hand to improve this page i could of added a few more images or text to make the page more exiting.

Finally my contact page. I started the same as i did with every design; taking the header, search bar and social media from my previous html. Next using the <h1> and <p> I was able to add the header and content, which I was able to modify using CSS and centre the text by using align: center. However I felt that the page was looking a little plain so using img src I added in a image, aligning it using position: absolute in CSS.

Adding the links to the different pages wasn't as hard as I thought. Firstly I had to make sure all the pages were placed in my website folder. Next using <a href> i was able to link the pages to their names.

Overall I would say that coming from no experience at web design or html coding I have managed to achieve a lot in this unit, and have learned a lot of new skills. Although my website is not perfect and is not up to professional standards, I have still managed to create from scratch, a working and interactive website which includes added features such as a slideshow and search bar.