7.3.17

Lent Inspired T-Shirt Print Design

This design is about a lenten activity called Visita Iglesia, a Catholic faith tradition wherein pilgrims visit five to seven Catholic churches during Lent, especially on Maundy Thursdays. From a distance, you can clearly decipher what the design is all about because of the prominent title "Visita Iglesia."

For the background, I used a cropped map of Bulacan, showing only its southern part wherein the seven churches are located.  To give emphasis to the names of the Churches, I lighten the colour of the map and all its other elements which are not significant to the purpose of the design. The map, together with the church icons and names, suggest a journey of the pilgrims.

For the reason that the upper portion of the map is irrelevant to the purpose of the design, I covered it with a prominent title. But the title was not enough to hide what isn't necessary. Furthermore, with the title and the map alone, the design looked flat and boring. So, I designed a logo for the activity and put it on top.

With the text and the logo, the design looked out of balance. To remedy it, I placed a dark bar beneath the word "iglesia." This is also to emphasise that the word "iglesia" is more important than the word "visita." The dark bar should serve a better purpose other than aesthetic. So, that's where I put the tag line "Communion of Communities."

Unfortunately, the organisers of the visita iglesia opted to have the bar removed. Instead, they asked me to put the text around the logo.

It is sad that sometimes, a designer has to sacrifice the principles of design to favour what the client wants. In the case of this tee shirt print design, I had to sacrifice —
  • simplicity and minimalism (the lesser the elements, the better; no redundant elements such as texts placed twice; in the final design, "visita iglesia" was placed twice)
  • emphasis of the most important word (which in this case, the word "iglesia") and 
  • balance of elements (the dark bar removed.)
Though I do understand, that I cannot expect every client to understand the principles of design, I have to consider what would satisfy them. At other times, I would opt to cede to what they want than insist on what I believe is more appropriate, just so I can finish the project without delay. After all, though it is my design, the final product is theirs.

Design is an intimate process. For designers, each design is like an infant that was conceived in their minds. It is not some kind of food like burgers and fries that you buy cheap from fastfood chains.

Visita Iglesia (eng church visit) is a century-old tradition of the Catholic faithfuls in the Philippines. It is a pilgrimage when Catholic faithfuls in the Philippines visit five to seven Catholic sanctuaries on Holy or Maundy Thursdays, when the Blessed Sacrament is exposed for adoration by the Christians.

16.12.14

If You Cannot Draw By Hand, Use Textual Images

Textual images can be direct to the point or act like a teaser. When headings can be boring, substitute it with a textual image; or use one to emphasize it even stronger. If you do not have a fine-art hand, play with text and colors. It is better to have at least one image rather than none at all.

An image is very useful in sharing your page to social media sites such as Google+, Facebook, Pinterest, and a host of other sites. A shared post with an image attracts more attention.

Use it for your Top 10 Lists
textual images featuring creative design services
An image that encapsulates your services
Emphasize your message


6.10.12

Fullscreen Background Slideshow: jQuery vs Shockwave Flash

A client wanted a website with a background that changes every a few seconds. My friend and I had two options: use
  1. JQuery, or; 
  2. Shockwave Flash movie (swf) 
Our consideration was which solution would load more quickly. As much as possible, we did not want the site's first-time visitors to see the loading spinner for more than 5 seconds, if not at all. After multiple searches, my friend Eduard found this one.

Build Internet's Supersized! jQuery Plugin 

Supersized! is a fullscreen background slideshow built using the jQuery library. The demo uses 9 images, sizes ranging from 97 kb to 236 kb. The width ranges from 800 px to 1024 px; height from 511 px to 1000 px.

If you are a first time visitor of the site, it takes about 2 seconds before you see an element (some texts); 15 seconds after, you begin to see the slideshow background. Good enough! At least, the visitor wouldn't have to wait for a long time. That depends of course on the Internet and hardware speed. (My speed during the test was 620 kbps (down), 393 kbps (up)).

What If It Had 14 Images? 

  • I used instead 14 images that were 1280 x 800 pixels ranging from 79 kb to 129 kb in file sizes. Testing it in my local drive, it took 24 seconds before the slideshow began. Not good! I was just staring at a blank page, waiting, wondering what was happening. 
  • I decided to make a default background using CSS. The result was better, at least, I was seeing something. However, I still had to wait long before something had to happen. 
  • So I decided to put a loading spinner. Much better! At least, the spinner tells the visitor that there's nothing wrong with the site, his computer, or connection. But still, he will have to wait a while. The Supersized plugin actually includes a loading spinner but it doesn't show up until a few seconds before the slideshow begins. 
  • In order to divide the queuing time, a trick is to show some text elements before the slideshow begins. Texts load faster, so at least, the site visitor can have something to read on while waiting. 
  • In my example, however, I didn't include any text. Instead, an image (which was a logo) was the only other element on the page. Testing it in my local drive using Chrome (cache cleared), it took 22 seconds before the logo showed up; then another 4 seconds before the slideshow began. Not bad! On Safari, the result was not the same. After clearing its cache, Safari was showing only a white page. I had to stop the stop watch after 2 minutes. (Does that prove Chrome is really much a faster browser?) 
  • My next option was to preload the images using Javascript but the result was the same. So, I downsized the images, ranging from 60 kb to 88 kb each, all 800 x 440 pixels. On Safari, the same thing happened, after 2 minutes, nothing was showing but a white page. On Chrome, the logo showed up after 7 seconds; the slideshow started 2 seconds after. A slight drawback was the images being slightly pixelated.
  • I settled for the higher resolution of the images. After clearing Chromes cache, I tested the page on the Net. What surprised me was that the page loaded faster than when on the local drive. It took only 5 seconds. I got the same result using Safari. You can view the result at amikvs.com

Fullscreen Background Slideshow Built Using Flash 

Unfortunately, I could not test the same 14 images using Flash. I have not been using Flash for years now. Instead, I used a Flash movie with only 7 images. The file size of the Flash movie is 575 kb. On the local drive (cache cleared), it took 23 seconds before the first web element (some texts) showed up; 1 second after that, the slideshow began.

On the Net, after clearing my browser's cache, it only took 5 seconds for the background slideshow to begin. (I wondered why was it faster on the Net than on my local drive? Beats me!)

You can view the sample at our lab.

How To Set a Shockwave Flash Movie as HTML Background 

You cannot actually set a Shockwave Flash movie (swf) as HTML background. You have to embed it as an object. That means, it is one of your HTML contents. So, if you add another element, like text, it shows below the Flash movie instead of floating on top of it. To make all other elements float on top of your Flash movie, the trick is to use CSS where you assign the Flash object a div id. Something like this.

#flash { position: fixed; margin: 0; padding: 0; top: 0; left: 0; height: 100%; width: 100%; z-index: -99999; }

It is important that you assign a high negative value to your z-index so that all other elements of your HTML stay floating on top of your Flash object.

Then, on your HTML page, set the param of the Flash object to "wmode" and "transparent". Something like this.

<param name="wmode" value="transparent">

Shockwave Flash Files Are Lightweight 

 Compared to raster (bitmap, pixel based) images, a Flash swf file is lightweight because it is vector based. The quality of a vector image does not change even if you re-size it into something bigger. So when composing your Flash movie, the size of it does not have to be as large as your computer screen.

A photograph is a raster type of image. You can convert this into vector before you import it into Flash. That will make your SWF file smaller in size. There are tutorials on the Net on how to convert raster images into vector images.

Pros and Cons 

Using a jQuery Supersized! slideshow is easier to build. The codes are already given. You just edit the file names of the images. It is easier to maintain it as well. If you want to change the images, simply overwrite the existing ones. Use the same file names so that you don't have to edit your HTML.

Using a Flash movie as background loads faster if the file size is small. The transition of the images is much more fluid. However, it is not easy to build it unless you are a Flash expert.

8.2.12

Best Screen Size To Design Websites

My friend and I always argued about the "right" or better screen size to design websites. He would design websites as wide as 1900 pixels for the reason that his monitor is that wide. I would prefer smaller because I believe most Internet users still use 1024 x 768 monitors.

I'm about to design a web site for Legaspi Landscapes. Again, I have this question in mind. What's the size of my website? Maybe, the experts have the answer.

At hobo-web.co.uk, the author said that there is no best screen size. What is important is that the web site can be viewed in any device, in any screen size. The size should be flexible, i.e., it should contract and expand fluidly in any screen size.

But, there should be a based size or the size to start with. Hobo-web.co.uk shows live global, US, and UK stats on what the majority are using. The screen resolution 1024 x 768 is the one that is widely used globally. So, might as well design websites using this size.

Now, I have the knowledge of an expert to back up what I believe.

You can read the full article "Best Screen Resolution To Design Websites" at hobo-web.co.uk.

20.9.11

Web Design Review: Sonic Vitamins Dot Com


Here's another website I found with a good design. I don't usually like black and grey because I find them morbid and boring; but if used properly like what the designers did for SonicVitamins.com, they could be very attractive and effective. This design is simple yet not boring because how the designers put life to it by applying a good combination of colors and how they are positioned to one another. The black background creates drama. The grey background is hardly noticeable.

Designing a web is not easy for me. That's why I admire good graphic designers with amazing creativity. Their ideas are boundless. They are gifted.

23.7.11

How to order



If you want to get my services, please fill out and submit this form. Upon receipt of this form, I will confirm your order. You may view the form in full here.

If you don't have a PayPal account yet, apply here. It's free!

If you're looking for a budget-friendly web host, I recommend Mocha Host. You can also register your domain name at Mocha Host. You may want to check now if your domain name is available.


Web Design Pricing Calculator



Depending on your budget, this calculator helps you decide which of the services you want to avail yourself of. It also lists the services I offer and the prices of each service. You can download this calculator at Google Docs.

Don't have PayPal yet? No problem! Apply here. It's free.