Web Design

9 Japanese designers’ flash portfolio that you should see

Japan are one creative country with diverse culture and design movement. Some are going for cute, some are experimentalist and some are towards form and function. Here I present you 9 Japanese designers’ portfolio site which all are built by using flash that everyone should take a look and be inspired.

Masaki Hoshino – hybridworks.jp

A portfolio of a graphic designer Masaki Hoshino. He is very good in designing icons, wallpapers and pixel art. His work is fine and the detail is amazing. The layout is functional and note that you can switch the layout style too, which is very cool!

Masaki Hoshino - hybridworks.jp

Continue reading

Create a simple scrollable content with CSS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus a turpis. Donec accumsan tellus eget velit. Maecenas eget risus. Praesent quis nisl. Sed in odio non orci varius pretium. Nam convallis tincidunt nulla. Quisque malesuada massa eu elit. Aliquam ac diam vitae neque fermentum pulvinar. Morbi eget mauris eget justo convallis fermentum. Fusce hendrerit. Donec nonummy nulla sed purus. Proin ut quam vitae quam semper rutrum. Vivamus fermentum urna dictum felis. Etiam at ante. Cras vel dui. Sed porta, ipsum eget auctor congue, justo nunc viverra dolor, vel molestie metus diam sed elit. Nulla facilisi. Quisque euismod, lectus non tristique gravida, lectus pede aliquet massa, non rhoncus elit tortor vitae dolor.

Curabitur varius ipsum ac ante. Integer at felis. Nam ac leo sollicitudin velit faucibus fringilla. Praesent lacinia ipsum quis sem. Proin fringilla lacinia ipsum. Etiam imperdiet pede nec massa. Nulla interdum, nulla non sollicitudin volutpat, diam turpis tempor libero, quis egestas nunc orci ac sem. Mauris nisl nibh, condimentum ut, aliquet in, tincidunt vitae, leo. Fusce consequat, lectus eu sagittis bibendum, lectus odio aliquam nisi, in aliquet erat ligula nec nibh. Proin tincidunt. Aenean pretium blandit neque. Etiam libero nibh, molestie eget, sodales id, placerat sed, turpis. Proin ligula velit, ultricies id, hendrerit et, molestie ut, sapien. Nunc facilisis.

Basically, the scrollable content above is just done by using CSS and not iframe. This can be achieve by setting up a specific width and height of a div tag, and putting a lot of text inside the div. Finally, we add the overflow property to allow the scrollbar appears. The specific CSS styles is shown below.

.scrollable
{
height: value px; /* set the height */
width: value px; /* set the width */
overflow:auto; /* make the scrollbar appears */
}

That’s it! The basic property to make a scrollable content. It works on Firefox and IE6 browser. You can add other styling as well if you want, for example border or background properties. Some advance styling will be putting a fade off effect on top and bottom of the content area.

This scrollable content CSS is particular useful if you want to display data like Latest News for example, and wanted to control the height of the content. Plus, it is better than using this method than iframe is that, all the contents will be in the same page and not load from other page (which iframe did this), so the SEO value is preserve.

16+ the ten list for web designers

As web designers I am always hunt for resources on the web, for example tutorials, gallery showcases, and thoughts from the experienced designers so that I can learn something from it. I subscribed to many designer’s blog feed and surf Del.icio.us regularly, and I found out some The Ten List from various websites to inspire and help many web designers.

What I mean about the ten list is that an article that contains ten essential points that presented in a list. I categorized them into several big categories for better navigation. Please have a look. Continue reading

I love typography

I have great interests in typography subject since studying in graphic design course. It is amazing that by using a certain typefaces with the placement of the types can create incredible visual language even without the using of images. Typography is actually a very professional skills, because it is not just about selecting the right typefaces, but the layout, the size, the grid and many more.

According to Wikipedia, typography is the art and techniques of type design, modifying type glyphs, and arranging type. Type glyphs (characters) are created and modified using a variety of illustration techniques. The arrangement of type is the selection of typefaces, point size, line length, leading (line spacing) and letter spacing. Typography can be apply to anything, from displaying text as information to treating text as images. With the aid of digital fonts and design softwares, designers can play with the text freely. Continue reading

4 sites for your testing needs

Human are always curious to test things out. We test things so that we can improve and be smarter. I found out 4 sites that provides free testing and comparing services that will save your time and to know your websites performance. The testing service varies from browser compatibility check to website readability test, let’s check this out.

Typetester – Compare screen fonts

Typetester is an online application for comparison of the fonts for the screen. You can compare 3 fonts at a time, with a variety of options to customize your comparison for example text size, leading, tracking etc. You can test the web-save fonts like Arial and Verdana, it even reads all the fonts installed in your system and you can use them to for testing too.

Continue reading

Nice website – LittleDeviant xD

Yesterday, I stumble upon a website and found it very interesting and decided to share with you here. The website is called LittleDeviant xD. When I first visiting this site I never know it is a viral site for Scion, a very creative minded car brand. The site was developed by branding agency ATTIK, to promote the new 5 door xD Scion with a very unusual way.

This flash based site presents a gothic digital novel/video game, “Book of Deviants,” that opens to reveal a pop-up world. The animation is fluid and animation is creepy but fun. Then, you have to going through chapter by chapter to wipe out all the boring Sheeple who makes the city lifeless and gray with a character “Little Deviant”. The Little Deviant (xD) is driving a Scion, and it requires the user play a small game to control the xD to kill the Sheeples as screenshot shown below. I’m using mouse to control the xD’s hand to slash the sheeples, haha.

Continue reading

Surf in another dimension?

Screen are flat, normally what we see on the net is just a flat piece of info. But there is designers that breaks that boundary. They want the viewer to experience that actually you are in the virtual 3D web space which create the illusion to viewer. These websites are outstanding and inspiring just like M. C. Escher‘s drawing partially shown above.

The websites listed here are powered by Flash, and they are range from 3D menu system to the whole 3D web environment. Please enjoy! Continue reading

More free fonts & web gallery

What is so great about having a habit of surfing Del.icio.us’s Popular and Recent bookmarks is, you get to know the nice & inspiring websites that discovered by other people which is so convenient and useful! Thanks to this social networking site, I found another 2 sites that provide quality free fonts & web design gallery.

Die Gestalten free fonts

Die Gestalten offers free fonts featuring experimental display fonts in addition to single weights of the popular text fonts for trial. The free fonts is being added and updated regularly so be sure to visit this site frequently to get all the free fonts they have on offer! Sadly some fonts is available for MAC only.

Style Boost

Styleboost is a gallery for showcasing beautiful web sites. It has been around since January 2001 and is created, designed and maintained by Johan Bakken. The gallery is clean and simple. Every sites that is listed here not only will be categorized by its characteristics, it also categorized by the colors of the site. Plus, a short description to further understanding the listed websites and it also allow users to comment too.

7 Delicious Web Design Galleries

Web design gallery is the great inspiration place for many designers and enthusiasts. It showcases the best sites that combines both usability and aesthetics of design. Getting listed in one of those could be a great honor to the firm and the designers. Here, I present some of the sites that showcases the great web designs and each gallery is unique on its own, read on!

Continue reading

Where to get Quality Free Fonts?

Where to get Quality Free Fonts?

Since the early age of human race, communication is playing the vital role, either using body language, eye signal, or by using drawings. Then, to make communication better, human invented symbols then refined to become text. In the past, books were hand written, and thanks to Johannes Guternberg’s first printed book “42 Line Bible” by using movable type, books can be publish easily. Now in modern age, typefaces were transformed into digital format or “font”. Although David Carson once declared “The end of print”, but for me text and print is still important.

There are so many free fonts for download over the net but, only quite a few that provides quality, here are some of my selection.

Fontleech

This site provides nice free fonts from different font foundry from around the world. Must visit.

Fontleech

Continue reading