Archive for January, 2013

Put thought into your design

Posted: January 29, 2013 in design, web, web design

As much as I want to experiment on this activity, I chose to do a simple design as I am still not home and with limited resources. I am also in the middle of processing something that is very important that my time is really divided. Anyways, this activity is designing 5 webpages that will feature a place to promote it. It can be a blog and so I did a blog about Sagada. It is a place in the Philippines where I visited several years ago. I made a photoblog about it before and that was my source of photos. The text was copied on a website (http://www.thepoortraveler.net/2011/10/planning-trip-sagada-itinerary/)

I originally wanted the logo to be at the left side but it was a bit advanced for me. It is a simple web blog with straight forward functionality that will attract readers wanting to know about the place. Pictures were used so reader can have a taste of what to expect. I chose earth color for the palette as the blog is about travel….like….walking on the face of the earth. I included links for social media such as facebook and twitter for additional portal of promotion.

 

 

Page2 Page1 Page3 Page4 Page5

This week’s assignment deals with creating a different look from an existing website. We are asked to re-design a website in 3 different themes that will convey different impression from readers/website visitors. Re-design the look that is, meaning the design does not need to be functional or clickable 🙂

Here is a screenshot of the original website: 2013-01-19-06_42_37-Kampanje---gsport or its link http://gsport.no/

I chose an online website of a sports shop G SPORT as this has a wide target group and I can base my design on that. I chose a minimalistic formal design, energetic ultrasport design and light youthful design.

FORMALSTYLE   

energyjpg

YOUNG

 

 

In our first lesson for web design, we discussed the need to brief the client thru questionnaire. Unfortunately, I was unable to open my prior blog so I had to come up with another 10 questions but I think it is almost the same as my first. These questions were used as guide for creating the wireframe of a fictitious website. A wireframe of a website is like the blueprint of a building wherein parts, functions and contents were placed and arranged together to form the structure of a website.

Wireframes too are like sketches of web layout but more detailed so clients will have a feel of how the website will function and appear. It is void of color to be able to really focus on the functionality of the layout and not the aesthetic part of it. So, here are the 10 questions that I used in making this wireframe.

1. Why do you need a website? purposes and goals.
2. What do you want the visitors do on your website?
3. Who are your competitors and how do you differ from them?
4. What is your timeframe and budget?
5. Do you have an existing logo?
6. Do you have an existing website?
7. Would the site use social media like facebook, twitter etc?
8. Would you be using search engines?
9. Would the site support multiple languages?
10. Please list the names of three sites that you like and explain what you like about them.

Here is a wireframe of a website based on the questionnaire.

2013-01-13 09_08_06-articlepage   The header which includes the navigation buttons, banner and search/log-in/language button stays on the page all throughout as well as the social media links. The navigation buttons on top functions straight forward and will change color when clicked.

clickedbutton

next button The next button will show more articles/blogs/entries.

languages  The triangle on the multiple language button will show multiple languages when clicked. The search button will show a writing field when clicked as well as the log-in field.

I was about to use low-tech wireframe but I have no access to a scanner so I chose high-tech. I would love to use low-tech as it gives me fast result and is very versatile when it comes to modification. If I am going to show the client a low tech wireframe, we will be able to write notes right there and then.

Introduction to webdesign

Posted: January 6, 2013 in design, Uncategorized

Megame -_-

This might be my last blog for this year 2012. What do you know…the world still exist! Inspite of all going haywire these past few days and instead of getting some inspiration, I got some frustrations…I still choose to smile and take things the way they are. I choose to look at people who inspire, who support and understand not only because Christmas is just around the corner but because we are human and we are capable of empathy.

Before getting into my assignment, I would like to pat my shoulder for ‘a job well done’ this year!! Yehey! I am grateful for people who made it easier for me to handle both my work and studies!!! Thanks thanks!

So first semester is over and we already began with 2nd semester’s first activity. This week’s topic is all about WEB.

  1. Explain the following terms in your own words:
    • The Internet

View original post 677 more words

Introduction to webdesign

Posted: January 4, 2013 in design, Uncategorized

This might be my last blog for this year 2012. What do you know…the world still exist! Inspite of all going haywire these past few days and instead of getting some inspiration, I got some frustrations…I still choose to smile and take things the way they are. I choose to look at people who inspire, who support and understand not only because Christmas is just around the corner but because we are human and we are capable of empathy.

Before getting into my assignment, I would like to pat my shoulder for ‘a job well done’ this year!! Yehey! I am grateful for people who made it easier for me to handle both my work and studies!!! Thanks thanks!

So first semester is over and we already began with 2nd semester’s first activity. This week’s topic is all about WEB.

  1. Explain the following terms in your own words:
    • The Internet
    • HTML
    • Browser
    • Search engine
  2. Please research and add another 10 questions to the briefing process.
  3. From this list of 20 questions (your 10 added to my 10), please create the ultimate list of 10 questions that you would use for clients.
  4. Please upload this activity to your WordPress blog.

INTERNET: is a way of communication which uses devices and connect them with each other. Devices like computers, mobile phones, play consoles and recently some house appliances like televisions, radios etc can all be in one network using an internet connection. The internet makes it possible for a device to communicate to another device in a very short time. As I remember, people abroad used to record voice tapes and send it to their love ones which takes several days before one receives it. Today, we have different applications which uses internet as a form of communication. Skype and viber are some examples.

HTML: HyperText Mark up Language – as the name states, it is a language that enables us to create a website. It is consists of short codes typed into a text file by the site author, saved as HTML files and translated for us by internet browsers.

BROWSER: Or web browser is the physical form we see on the internet, an application that retrieves, carries and displays data i.e. text, videos or pictures.

SEARCH ENGINE: is a coordinated set of programs such as a bot or crawler that crawl around the web and gathers informations, programs that catalogues and store informations and programs that receives search request, compares data and gives back results to the search.

Here are the 20 questionnaire with my 10 added questions which is written in red.

  1. Why do you want a website? what will be the goal and purpose of the site?
  2. Do you have an existing website? If yes, what and why do you want to change or retain.
  3. Will you be providing creative direction?
  4. Do you have a logo? If yes, In what format?
  5. What kind of visitors are you expecting on your website? (Consider their income, interests, gender and age.)
  6. Who are your competitors and how do you differ from them?
  7. What actions do you want visitors to take on the site?
  8. What is your deadline for completing the site? How big is the budget?
  9. What features should be used on your website? (This includes things like contact forms, pictures, videos, etc.)
  10. Please list the names of three sites that you like and explain what you like about them.
  11. Do you have any colour preferences? What should the look and feel for the website be?
  12. Who will be the contact person for this project?
  13. What do you NOT want on your site in terms of text, content, colour and graphic elements?
  14. Who will be responsible for maintaining the website? Will the person have the time and skills to do so?
  15. Would the site support multiple languages?
  16. Do you need search engine help?
  17. How often do you need to update the site?
  18. What software do you have?
  19. Do you need social media tools built in? (Digg, twitter, facebook etc.?)
  20. Do you have a domain?

 Below are 10 questions that I believe is important to ask clients before designing a website for them.

1. Why do you want a website? what will be the goal and purpose of the site?

2. What kind of visitors are you expecting on your website? (Consider their income, interests, gender and age.)

3. What actions do you want visitors to take on the site?

4. What do you NOT want on your site in terms of text, content, colour and graphic elements?

5. Will you be providing creative direction?

6. Do you need social media tools built in? (Digg, twitter, facebook etc.?)

7. Who are your competitors and how do you differ from them?

8. What is your deadline for completing the site? How big is the budget?

9. Do you have an existing website? If yes, what and why do you want to change or retain.

10. Would the site support multiple languages?