Web Design 2 - Interface design tryout

Creating layout for my AHR website is... harder than what I thought. x.x Made some changes from the initial idea, and this layout below is not completely done yet, still left the 'follow us' part which will be located at footer. Will improve this layout as soon as I got the time.

Anyway, just to show here my progress. The very very first version of my AHR website (I'm sure there will be changes soon). Will post up another type of interface design here too, so stay tuned~~~~

Til my next post then!!

Web Design 2 - Revised Site map and Moodboard

(*ARGH SO SORRY FOR THIS LATE POST*)

Okay. Here it is.

Revised site map. Made a bit changes on the main menu, I think with this kind of navigation the main selling point of AHR can be more obvious. Dining and Nightlife options will be main focus since for user point of view, information are more important than anything else. Events will be second priority since they are important attractions for AHR. Ok, others... are kind of the same as the last original site map. 

Web Design 2 - URLs for Coding and Design Tutorials

After looking at nice references, now I proceed to looking at some interesting codings/design tutorials and perhaps can get to use them for the right purposes. =)

1. URLs for HTML/CSS codings
- 5 simple, but useful CSS properties
- Cool HTML codes

- 10 rare HTML tags you really should know
- 11 useful sources to learn and improve HTML skills

- HTML5 cheat sheet (PDF) (lolx~)

2. URLs for Design Tutorials
- Hexagon Bokeh Effect in Photoshop
- Gorgeous Classy text effect
- Gold Text effect in Photoshop
- Wooden Text Effect in Photoshop
- Sleek and Stylish MP3 player in photoshop
- Learn to create some websites' layouts in Photoshop

Okay, til my next post then. Bye bye~ =)

Web Design 2 - Beautiful Commercial Websites Analysis

Hello again! After going through the competitor's websites, it is time to look for beautiful websites for art direction references. Here are some of the nice websites I've found :D

1. Glenilen Farm

Home Page. I like the colours and the simple yet nice looking layout. The footer has some nice graphics and the overall feel is strong.

They have very nice looking products' pictures, and when you click one of the thumbnails you will go the the page on the right. I like how they take care of small details/designs for the whole website.

I like this website even more when I reach the page above. They even draw the map nicely to suit the overall art direction of the website. I've seen a lot of websites where thy just simply put a picture to show the location, but ignore the aesthetic side of map. This website notice this and I like it very much.

More research, click 'Read more!" ;)

Web Design 2 - Competitor's Websites analysis

For AHR, took me some time to figure out their competitors because there are only a few which have almost the same concept as them (it's more difficult when some of them do not have an official website). So, I decided to look at a few types of websites:

(1) Roads which famous for dining/nightlife: Soho KL, Look Out Point, Singapore Orchard Road.
(2) Nightlife websites: Quattro, Zouk, The Opera
(3) Heritage Websites: Malay Heritage Singapore, Baba Nyonya Culture.

 and perhaps to combine their good points/elements/ideas together. =)

Click 'Read more' to read my research! :D

Web Design 2 - Client's Website analysis

Asian Heritage Row. The Site Map for this site, if you are interested to know.

*Add: Asian heritage row has a very beautiful story behind. That row of houses used to be prewar houses,  they had a time where they were the abandoned ones; no one cares and everyone thought that It will just become another history and forgotten by all nations. But William Ng thought the different way. Instead of letting them go, he decided to turn those old houses into something new and trendy, at the same time to preserve as much old items/materials as possible during the construction period. When people thought it will be forgotten, he successfully made them into beautiful row of houses where people can go and enjoy nice food, and have a nice night time out. (They have mainly clubbing areas and restaurants there)

 

The above image is the main page (Home) for AHR. The very good thing I like about this website is their flow. They create a very nice flow for the whole website, when you click 'enter the heritage' they will lead you to the 'about' page, where you can read about the history, how they decided to build up this site and so on. 

In terms of design on the other hand, I really think it could be improved. The background image is actually an interesting one, but it is a bit hard for people to notice it. I actually really like the concept behind AHR, but sadly the visual of this website is not strong enough to bring it out.

More analysis after you click 'read more'!

Web Design 2 - Gantt Chart & Site Map

Hello people!

here comes my 2nd Year 3rd semester. For my Web Design 2, we need to redesign an existing commercial website, and the one I've got is Asian Heritage Row. Below is my Gantt Chart and the site map for Asian Heritage Row website. =)

There will be more research coming soon. Hehe~ :)

Moodboard ♥ Flowchart ♥

"How to escape a nightmare"

Okey.

Flowchart coming soon~

=)

*Updated!*
*Click on Read More to find out*

Ideas for "How to..." Project

Hahahah~ after brainstorming for *almost a week* thinking of ideas... well, finally i can come out with three ideas which i think i will be more interested to do and work hard on.

So, just something to share =)

Interesting Tutorials =)

Yay. Here comes some Photoshop/Illustrator tutorials that i find quite interesting and useful at the same time.

Enjoy!


1. Water Colour effect Using illustrator

(I think this effect is quite pretty, it will be suitable for some websites with cool colours. ^^)

Beautiful websites!

Hi all!

Yes, i know I haven't update this blog for agessss... but now I am back! muahaha~

My college life at TOA moved on. Now im at my Year 2 Semester 2 already. It's very glad to say that we get to learn some interesting stuff this sem ^^ really excited, hope i will do well in everything.

Ok, for my Web Design 1 class, Joanne would want us to do some research on beautiful websites. After 1 day or so busy researching, here are some sites which i think is quite beautiful, yet organized at the same time.

1. GLUCONE-R

(Like the idea how they used beautiful raster pictures for the whole website to sell their concept. It's very user friendly, and looks very pretty too.)





2. Kari Jobe

(Got attracted by the background design. Love the scrapbook feel and i think the overall feeling and theme suits the singer very much. )

Different form of music... ♥

Kashiwa Daisuke's music collections.

Get to know this Japanese artist from newspaper today. Listening to his music gives me the goosebumps, it's fascinating. Incredible. Unpredictable. Interesting. Sentimental.Romantic and so on... ... ...

I, have never heard of something like this before. How i wish i can actually own one of his CD now.



PS it's just plainly personal opinion. why not give ourselves some refreshments for our ears? ;)

One of the example of the reviews i can get to research online :

http://airplaneshadows.wordpress.com/2008/05/22/kashiwa-daisuke-%E2%88%9E-program-music-i/


"Stella Part 1", from album [ Program Music 1 ]
http://www.youtube.com/watch?v=hh6eT_zhmRg

Another wonderful piece by him:
http://www.youtube.com/watch?v=mzRW9SiSx2I&feature=related


Just wanna share it here. It's nice to know some awesome music right before sem starts again. Hope everything will goes well for the future semesters. Can't wait to learn more stuff. ^__^

Enjoy your last day of sem break, my fellow friends! ♥


PS my holidays has been good. Satisfied coz can get to finish
most of the stuff i wanted to do. Hope you guys are doing well too

See u all tomorrow! haha~

Blog header project ? XO

Lolxx, haven't update this blog in ages. Had been quite busy doing all sorts of stuff. XD Just to stop here to *perhaps show* u all what i have been doing during this semester break.

1st of all, had promised to help my sis to do her blog header since a few months ago. But i was very lazy to start, and i did create one before but the result was not satisfying, so i plan to make use of this holiday to really concentrate on this and *hopefully* create a nice blog header for my sis ^^

Lolxx.. so i'm here to show my progress and my final outcome. *sounds like assignment now rite? yea its kind of like my home assignment, hahaha~*

lolxx.. 1st of all, sketches. hahha~ i drew 4 ideas,
she prefer the mask one so tat one got accepted. XD


progress...


i took a LONG time on the mask. which i dunno why also.
maybe coz i procrastinate ==" lolxx..

final ai file look. XD

after finish tracing and colouring, i switch to Photoshop to put in the words.

so, here's the final look!


and then one printscreen of my sis's blog, let u all see how it actually looks there...

Overall, i had fun doing it. At least its better than spend time on *more and more movies and snacks and Facebook :O * but but, most importantly, im glad tat my sis likes it. ^__^

Hehe. ok, tat is all. Shall move on to the next 'assignment' which awaits me. ><

will update you guys on tat SOON. yea... XD
byebye~

Just a short update...

Yes. We actually tried to do some simple photo montage on Monday (26/10/09) and i admit its quite fun to do those simple yet effective effects! ^o^

So here's two photos that i play around with, cant say to be the nicest or best one, but i kind of like the end results. =) Should study and explore more effects and hopefully i can share more with u all during my coming sem break, or whenever im free to do so. XD !

Okey.. So here's the 1st photo. I think this photo is too dark so i decided to make it brighter. =D

Before:


After:

*my first try. not so good in my opinion. =.=" *

Okey. Here's my second try. XD



Overall, still need more practice. XD ok. i go continue my work.

Byebye~~ ^___^

Colour Palettes! ^^

Hehe.

I had a fun time searching for colour references and here's some nice colour palettes I've got.

It will be useful for my current project and also future ones i guess. ^^

I call this "brilliant orange". ^^ It's suitable for my e-card design because my card has more
orange-y feel. XD


Love the colours on the top of the picture. I call this "cherry cherish" Lolxx.. XD



Love the bright colours of the cupcakes and the colour i've picked!
and its surprising that this kind of colours can also bring out some level of
energetic feel, in my opinion.. lolxx.. XD
palette name: colourful cupcakes. ^^



I call this "summer kiwi". Again, more on bright colours coz my e-card has more
bright and energetic feel. =)


"japanese kimono".
Got attracted by the colours of the kimono so i made a palette out of it. ^^


I actually collected more, but i guess i'll share more next time. =D



This assignment is really fun! =D
Okey, i shall back to my project work... til my next post then.



Byebye~ ^^

Flowchart ^^

Hey hey, it's Thursday night! XD lolxx.. okey. we were actually been told to look through some videos about this thing called 'flowchat' .

So basically what is a flowchart? When i first look at it, *maybe because of the shapes and style* i thought it is somehow like a mind map. But after i look through some other videos only i get to know that this "Flowchart" has much difference compared to normal mindmap because it actually comes out with a certain format, with each shape of the chart to represent different message/idea.
Such as: the diamond shape represents a decision, while rectangular shape represents process etc.

In that way, it could make things look easier to understand.

So here comes the Q & A section:

1. Who do you want to use flowchart in your mobile interface design & screen interface design?

I think flowchart is convenient and easy to use for our project planning part. This is because through making a flowchart, we can know clearly how should we have all the design processes, about how we want that design to be/how it will turn out (decision) and then all the consequences that may happen during the design processes. It can let us see clearly about our own target/decision, hence we create our designs follow the 'process' part and then if it will turns out to be a 'yes' or 'no'. If it's a no, then we can do refinement and improvement for our design through the 'process' part again. At the end, we will not/hard to run out of track while doing our project because we can see the whole design process clearly already.

2. How will it help your users to meet the interactive goals?

I think a Flowchart helps the users to meet the interactive goals by just perhaps looking at the flowchart: get to know how we get the project started, how we do the whole planning part, our design processes, and the end results. It helps the user to understand how we actually taken out this project, what we have done, and so, they would get to know our attitude towards this project, and hence will appreciate our work more *maybe*. The 'interaction' actually happened in the sense that people/targeted audience could know what have we done. It is more interesting than just looking at a very nice/wonderful artwork without any process explanations/working process. And so, a Flowchart could perhaps help to add value to our artwork, in a certain way. =)


Okey. Please leave a comment and i'll go leave comment too. lolxx. XD

Thanks to...

A thousand THANKS to:

1. Jason
2. Shaunie
3.Shih Shin
4. Heidi
5. Jeffrey
6. Yew Chin
7. Jacob
8. Wei Yang
9. Chay Fhun
10. Nicholas Tan
11. Kenneth
12. An Ge
13. Li Wen
14. Yee Ying
15. Sheen Yeen
16. Zhong Yan
17. Edmund
18. James
19. Eugene
20. Felicia Tan
21. Priscilla Wong

for helping me to finish up this user-testing assignment! =D

Appreciate your help very much!
And u guys seriously pointed out some particular things that i did not notice at 1st..

Thanks for all the critical comments!! Hahaha~ and for this 4 icons... 2 pixels and 2 vectors.. actually represent Home and Contacts... Same for both sets of icons...

And my theme is actually Chinese, which i used the traditional chinese red ribbon knot *dunno how to call it in english XD, its actually 'zhong guo jie' in mandarin, which Edmund mentioned in his comment* as my inspiration and design elements.. XD

Well, i shall stop now.

Thanks for ur help again! I shall work on my report and go refine my works! ^^

Comments are welcomed and appreciated! ^^

After few weeks of hard time finishing up my Icons Design assignment *why hard time? hmm.. maybe i shall explain it in my next post XD* , finally today we can get to submit it and Sook Chiung actually gave us a special lecture on "User-Test'. So, what is User-test? User test is actually extremely important for the designer to get to know/understand their own strength and being able to enhance their artwork/design based on feedbacks.

Yes! :D feedback!

So this is what we need to do during this weekand. And i need your help to give comments/criticism/opinions/whatever you think you need to say about my Icons Designs.

Please. Do not read this post and leave. Leave a comment based on my questions before you go! Your opinions are greatly appreciated!! ^___^

SO, these are my Icons Design:

Pixel icons

Vector icons

Questionnaire: (# Further critical comments based on the question are welcomed)

1. First of all, can you recognize them as icons? Or you might think of something else instead?
a) I can recognize all of them as icons.
b) I can recognize some of them, that is ________. *pls specify them, thank you.
c) I don't see them as icons.


2. If you see them on your computer screen or mobile phones, you will think that these icons represents? *home? contacts? mail? web? camera? etc....


3. What do you think is the theme for my design? *we actually create our designs based on one theme. What do you think the theme is? Suggestions like: Chinese, Red, Ribbons etc....


4. What do you think about the colour scheme for my designs? Is it suitable for the theme? Or maybe i could've choose another type of colour combinations?


5. What do you think about the details of my designs? Too much? Lack of details? Just right?


6. Perhaps further opinions on how i created the icons? Maybe about the effects that i used? Shadow effects? overlaying part, etc...?


7. Overall do you think the designs are original? Or you've seen them somewhere else?

.............................................

Okey. I think that is all. If you have more to say, you are always welcomed to do so. ^^

I hope to see your comments! It's k to be harsh or what. lolxx...XD

THANK YOU VERY MUCHiEE!!!!!!!!!~ ^___^

PS: if you happen to not having a google account to sign in and leave comment *and you feel lazy to create one , you can choose to leave comment on my Facebook. I will check these two sites from time to time. Don't worry. =)

and it's important for me to know who you are. so don't hide yourself while leaving comments k? XD lolxx...


Thanks again!!!~

Icons! ^^

Haha. Supposed to post this few days ago but i got too 'busy' slacking around doing something else instead of updating my blog XD

So anyway, here i am. Last friday's DDMM class was fun. We learned how to create glossy icon using Illustrator program, and i had thoroughly enjoyed myself doing it. =D

Here is the end result of my glossy icon! ;)




And then we were told to create this little clock below. At first i did almost 70% in class but when i got home, there is something wrong with my file so i got no choice but to redo it. Anyways, it is not that hard to do since we got tutorials to follow step by step. XD

Silver clock. ^^

Muahahahahah~ GREEN colour!! =D !!! ~~~~~
Green is ♥ ^^



PS: just realized that i should have named my blog greenislove12 instead of
artislove12. XD

*just random*



Kay, got to go and Finish up my other assignments. XD
bye~~

^__^