Archive for the ‘web design’ Category

Just finished my site after having so much trouble with publishing it! ūüôā I made a chaos out of my files and the server found it hard to find the links. So I had to re-insert my images and made a new menu bar.¬† I made several versions using fluid grid layout but for some reason I still don’t know…the HTML been corrupted so I just stopped. So my website won’t be suitable for smaller devices like tablets and mobile phones. Anyway, I am happy to have accomplished the project’s goal that is to make a simple website.

Here is the link: http://elevarbeid.webstudent.no/dmk1_nettstudier/Melinda_Mendez/index.html  (FINAL project)

and here is a link to the first one I made in such a haste: http://elevarbeid.webstudent.no/dmk1_nettstudier/Melinda_Mendez/index2.html ( I think the link to links is broken and I guess it was from moving files back and forth)

Advertisements

Simple Website

Posted: March 19, 2013 in design, web, web design

Our 5th mandatory assignment  is making a simple website. The homepage may contain fictitious content. The text content should explain or illustrate briefly the history of HTML and CSS. Also, share briefly the experience I have had in making the website.

From the prior learning activities, we touched on some questionnaires that is essential to answer before making a website. The questionnaire can be used both by the client or the web designer. So, I have these 10 questions that will be my start in making my first simple website.

1. Why do you need a website? purposes and goals. This website should show and give information about the history of HTML and CSS; show simple and  clear navigation.
2. What do you want the visitors do on your website?    Get information and learn something
3. Who are your competitors and how do you differ from them? This is a school project so this is non-applicable yet
4. What is your timeframe and budget? Timeframe would be 1month from now
5. Do you have an existing logo? No
6. Do you have an existing website? No
7. Would the site use social media like facebook, twitter etc? Would try to add one, no promises
8. Would you be using search engines? Would insert this too on the website
9. Would the site support multiple languages? No, I don’t know¬†how to do this yet.
10. Please list the names of three sites that you like and explain what you like about them.

1)  http://www.cytwombly.info/ : Very simple and yet different

2) http://blackestate.co.nz/:  I love that it is a scroll webpage and how the eyes navigates in every corner of the page.

3) http://blakeallendesign.com/: It is amazing how effectively typography was used.

By these answers, I will now determine what would be the content of my website.

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.