This week the task was to customize a wordpress site. I have customized my portfolio page. It took me quite some time to get my head around WordPress, so this LA is late. I have had lots of AHA moments and my share of frustration, but I made it. My site is customized but far from done!
A link to my portfolio site: Seventy29 design
A pdf with notes from the process:
WordPress is and open source content management system (CMS). WordPress was developed as a simple Web publishing application, that quickly became popular with bloggers. Today WordPress is so much more and you can use it to build almost any type of website, from blog to e-comerce sites.
Installing WordPress with bluehost was very simple. So simple that I became unsure that its was actually what was required in the assignment. I also downloded and instaled wordpress on my Mac, but realising that everything could be done so easy with Bluehost I later deleted the download I did to my MacBook. All the options for installing WordPress got me a bit confused. I have also been reseaching how I can move My Reflected journal to my Seventy29.com site. It was interesting to see that there is differences between WordPress.org and wordpress.com. I look forward to learning more and more about wordpress, how to customize it and develop a great online portfolio to display my work.
I have chosen the WordPress theme Hamilton to create my online portfolio site. I like my portfolio to be minimalistic and simple and this theme was great for that.
It still needs alot of customizing and work to look great. I have gotten the site up and running and added a logo, an about page (very little text here at the moment), and a portfolio page.
See my site in progress here it here: seventy29.com
Well.. it sure did make me understand the importance between the design and the programming phase. Making the design in InDesign early on, adding lots of pictures and fancy fonts, and a little complicated layout, I didn’t think to much about how this would be to code. I now see that the more you learn about code and how the programming works, it has to be taken into consideration when designing.
I have tried to write the cod with order and systematic. Even I have a tiny site, I got a little lost at times, and I am good at making a mess, so I see now the importance of file planing and creating a neat and tidy code.
The initial design of the site was simple and yet I had problems codeing it to look like the design I wanted:
The part I struggled most with was getting the pictures to float and position where I wanted them to. The spacing between paragraphs where also a bit of.
The index page
For some reason the index.htlm page did not display the right font.
The code for the header and navbar seems to be the same, but it wont display the right code. I have also tried an easier solution for picture and background since I was unable to create the one I had designed right away.
All the undersigths are the same, and have similar code. It’s only the pictures and their position that I couldn’t figure out.
Website preview in browser.
Code for ‘Our City’ page
Design of the page
Code
Design in InDesign
Code
Design
Events page in browser
code for event.html
Design
CSS:
I have copied the content from Harness Magazine. Harness is and online magazine, community and shop. They have a print edition also.
Their original site looks like this:
I have styled the content in 3 other ways.
With this style I wanted to create a corporate/business feeling to the magazine. It has the style of a intranet website of a company. It is simple and has few colors, other than the white is is all different shades of blue. The font is a clean sans serif and there is little decorations or graphics. Only the relevant content.
Using more feminine colors and decorative fonts I have tried to create the feeling of a magazine for women. The buttons have rounded edges, to blend well with the fonts. Some softer color here and there help to give the magazine a softer look. Pink and red colors are added to give a feeling of romance and femininity.
The last style is a tech and science magazine style. A complete white page with a single color to highlight headlines and categories gives a clean feeling. The serif fonts in the content and “button” text gives a feeling of authority and knowledge. The name of the site is written in sans serif to separate it slightly from the rest of the page.
Answers form the Woke Bean coffee house’s representatives.
1.Describe your business in a few sentences.
Woke bean coffe house is a small and cozy coffee house that focuses on fair trade and ecological coffee. Quality and craft is at the heart of our business. We roast out coffee carefully to bring out, and not weigh down the flavours. We have several different roasts for sale at our cafe and shop.
2. What specific services does your company provide?
We sell roast coffee beans. We have a small outlet in central tønnsberg. We sell carefully picked coffee beans from around the world that we roast ourself.
3. What kind of visitors are you expecting on your website? (Consider their income, interests, gender and age.)
Coffee lovers from both sexes in the age fgroup 22 to 49. They are interested in coffee, fair trade organic foods and culture.
4. Who are your competitors and how do you differ from them?
Waynes Coffee in Farmanstredet, is our biggest competitors, they serve organic coffee. Our selection of coffee is bigger than theirs, we also roast our coffee. They don’t have fair trade.
All the other coffee bars and cafes in Tønnsberg are our competitors. We will be the only coffee roaster in Tønnsberg and the only one with a strong fair trade profile. Maybe in the future some of our competitors would like to buy coffee beans from us.
5. Do you currently have a website? If so, what is/isn’t working for you?
No, we only have a facebook page. This is working fine, but can not be reached by people who don’t have an account on facebook. The FB page is also limited to the Facebook layout.
6. Please list the names of three sites that you like and explain what you like about them.
We like that they have big pictures and lots of space. Yes we like that everything is black and white except form the pictures.
Pura Vida
Pura Vida coffee is a company that we are very inspired by, we also like their website. They have a lot of focus on the farmers behind the coffee, we would like to have a balanced focus between the outlet/cafe, the products and the beans origin/farmers.
Coffee and such
We love how it is so many pictures of their place to inspire customers to stop buy. Black and white and only colors in the pictures.
7. Do you have any color preferences? What should the look and feel for the website be?
We like the site to be in black and white. The pictures should be colorful.
8. What is your site’s goal?
The goal is to inform our customers about who we are, where we are our, company’s vision and give customers a possibility to buy products online.
9. Who will be the contact person for this project?
Marie is the contact person, she is our product expert and marketing strategist.
10. Who will be responsible for maintaining the website?
Will the person have the time and skills to do so?
Marie will maintain the website. She has limited skills in website management.
Front page, header and footer is always present on all sites. Header menu gets a little shorter when scrolling up. Foter disappear when scrolling up.
Text in top menu is not clickable. Drop down menus appears when the cursor moves over them.
Above: Product page one and two.
Below: Cart, payment site and recite site.
About us page 1 which lead to about page 2 (layout for all the three other sites)
Our cafe page
Connection page
Featured photo by Merlene Goulet from unsplash.com
My reflective journal 