Elegant Web Design with Evo2

After the release of Semiomantics Evolution in March 2010, a new Elegant Web Design framework will be released this week. Evo2 is the most advanced and flexible elegant flash design solution tuned by Semiomantics.

I will present Evo2 feature by feature in a new series of posts about Elegant Web design. So much already today: Evo2 is an exciting  journey into elegant and media focused web design.

Semiomantics Evo2 Preview

Here some first screen-shots of the new flash framework:

semiomantics_evo2

Semiomantics Evo2

screen2

Semiomantics Evo2 wide screen

screen4

Semiomantics Evo 2 BW

screen3

Semiomantics Evo 2 BW wide screen

screen5

Semiomantics Evo2 Gallery

screen6

Semiomantics Evo2 Gallery wide screen

I hope you like this new development; your comments are appreciated :-).

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Create your Photo Gallery

Nice, your work! What’s next? We need an attractive and accessible way to share our photo- or other graphic work.

Looking at Photo Galleries online, you will notice: most of them look alike with a typical flow from the thumbnail to a medium sized image (often not bigger than 500 pixels wide).

Lightroom lets you generate such galleries.

Ycademy Photo Gallery

The purpose of presenting Photos is to maximize the power of the image by allowing for optimized display on viewers monitors. In other words: think big!

Personally, I just cannot get a real kick out of thumbnails and the greedy presentation of great images in small size. Sure, if you want to sell your photos, you don’t just want to give them away by putting them up for grab on your site.

But then, you could do with the thumbnail or a watermarked version and show a full size, maximum quality excerpt of the picture by cutting out a captivating part of the pic.

genescreen1

Ycademy Gallery

The main format we have selected for the Ycademy Photo Gallery is based on the image height of 600 pixels. This will fit and look good on any current monitor size. The width is not important as the scrolling is horizontal. The human eye prefers to scroll or scan horizontally rather than vertically.

Looking at the above picture for the purpose of the blog: I use the “thumbnail” size of 480 wide and load the image with 1680 pixels width. The thumb looks somewhat cropped, while the magnifying glass presents the original size view with astonishing detail. When you click on the pic and it opens in overlay, it will then go as big as your browser or full size depending on how I embed it. As a visitor to the post, you get really quite some views for your money :-).

The image in the header of the post expands first to browser size and then to original size, even if that is larger than your screen (top right click). Smashing!

Back to the Ycademy Gallery: the Gallery is a great piece of script for visual presentation of most anything you can pack on to an image.

Have a look at it from HERE.

Limitations

For the time being we will only deliver the script to Ycademy Pros and Seminar Participants. The Commercial Version will be available shortly. The difference being: the educational script we deliver for your personal use can be branded and and configured without editing flash, which makes it comfortable to use, the content, editing and configuration cannot be protected and secured. It’s therefore definitely not something you want to give out of your hands.

If you purchase the script from the Semiomantics Shop, please contact Bianca after the purchase by mail for delivery: bianca (at) ycademy.com

PS: The above image can be viewed live on site HERE

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Ycademy Easter Contest

Editing xml text is not all that difficult … once you get used to the format. In Semiomantics Evolution you can edit straight HTML code into the text tags, which makes it a Sunday walk.

HTML editing

Ute Schaedler has used plain HTML to edit her about page:

ute

Using HTML allows you to embed … pictures … for example :-).

Play with transparencies

Your image and text backgrounds can be modified easily by adjusting the Alpha values to taste. The Alpha values concern transparency; setting Alpha to 100 means no transparency while the value 0 (zero) would mean full transparency or no visible background layer.

An example of 0 values: Click HERE

On the home page there is a suite of images on the right site which are set on a zero transparency layer.

ydesign

The same applies to the showroom: you may place transparent png files on a more or less transparent background.

Try and enjoy the results.

I am looking forward to tonight’s session at 8 pm London time.

PS: More smashing stuff is under construction!

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Implement your Flash Showcase

Once your script is cleaned out and reduced to what you actually need as described yesterday and as done at last night’s Ycademy call, we can implement our project.

Prepare your upload

Before uploading you may already edit the index.html file and add the title of your site as well as the font as the case may be.

Also you can edit style.css to define link colors and other details if needed.

You may also want to edit your site logo:

Ideally the logo file is a transparent PNG image which in this case can be rather wide since we have just a few menu items. The bottom border of the logo is in line with the bottom of the menu items; therefore it is indicated to use capitals for the site header and align them with the bottom of the PNG file.

Example:

logo

Semiomantics Header

For better visibility I have added a background layer on the above. The dimensions are 592 x 60 pixels.

Upload and start populating Semiomantics Evolution

Before uploading the evolution folder you may want to rename it to the folder name it should take on the server; if you upload the site to the domain root (public_html) then you just load the content of the evolution folder without the folder itself.

Once uploaded you may want to start adding a background image (photo of graphic); I have loaded just a background pattern:

screen2

Background

For this project I keep a uniform background throughout the whole site; however i would be nice as well to create a nice graphic grunge or photographic background.

Edit menu.xml

Edit menu.xml from your xml folder: define the menu item titles and backgrounds as well as the copyright notice in the footer.

Populate your image gallery (about)

I start now by adding images to my showroom. In fact I am using for this project a showroom gallery instead of the about page: I will oad there graphic images representing my bullet list and then add text to the image legends.

screen3

About Semiomantics

The images are created in photoshop in 2 versions: jpg and transparent png. I load both versions to select later the images to keep – may be a mix of jpg and png images. To create the images I just created two layer sizes: 400 x 600 px and 800 x 600 px. Important: the images must be 600 px high. I drop my messages into the pictures using some grungy Times font and using background colors based on my usual color scheme.

The idea here is to use a gallery to replace the About page by graphically representing the main message I want to deliver and allowing for more information attached to each image. (This way of proceeding is not in line with the terms of the contest!)

Populate your Showcase or Portfolio

For the show case I selected screen-shots of websites I have designed and built for Semiomantics. I have selected 30 screen-shots to see the effect and to measure loading time. I will trim this down later and make a representative selection out of the lot. There are also others I may want to add …:-).

screen4

Semiomantics Showcase

The screen-shots are mega sizes from 100 kb to over 400 kb, whereas they will be adjusted for faster loading. I am testing flash compression and loading them as swf files which is one of the advantages of this gallery script.

A legend will be associated with each screen-shot; each image is based on a Semiomantics script type or module and can therefore be linked to a category or product in the semiomantics shop.

My recommendation: try to keep the image size as compact as possible for fast loading: ideally below 100 kb per image.

More later.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Build a Flash Showcase

Based on yesterday’s post with the terms of the contest, I will try to guide you step-by-step through a possible way of proceeding.

1. Organize your work

a. Copy your Semiomantics Evolution script into a new Folder on your Hard drive.

In my Case: I have a folder called Ycademy in My Documents, where I create a sub-folder Ycademy Collection. I Then copy the whole evolution folder into that new folder.

b. Clean out the Evolution folder by deleting all videos, images, thumbnails and sound files you don’t need for your new site. Take out namely all images and videos and your script will be 20 MB lighter to load.

screen1

Cleaned out Evolution

As you may not need all the sub-folders under your image folder, just delete whatever you don’t need; the same applies to video.

Now your folder should be just over 1 MB big and easy to load.

c. Load your evolution folder to your server.

2. Organize your Site

Decide on your Theme and Title

Organize the category content on your hard drive.

More later.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Best Flash Website with Semiomantics Evolution

Subsequent to the Ycademy March Seminar, I would like to launch an Easter Contest for all Seminar participants.

Here is what we are looking for:

The best small flash site with Semiomantics Evolution

Based on the Seminar materials you are able to build a small and beautiful flash website using the Semiomantics Evolution Framework.

screen1a

Semiomantics Evolution Art

Theme

You are free to choose your topic.

Site Structure

Menu Items:

Home Page

About page

Showroom

Contact Form

External link to your blog, shop or other website.

DO NOT ADD ANY OTHER MENU ITEM OR SUB-MENU BUT YOU MUST POPULATE ALL OF THE ABOVE!

Media

You may use images, videos and sound as you like and within the above structure.

Number of images

The Gallery in the Showroom must feature between 8 and maximum 12 items (images or swf).

Tips

I will publish a step by step tutorial or sample on the Semiomantics Evolution Website.

Deadline

Thursday, April 1, 2010 at 8 pm London Time. (This is no 1st of April joke!)

Price

The winner: $50 in cash.

Good Luck!

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Fouchtra – les Volcans!

The Auvergne is one of the very beautiful regions in France, shaped by volcanic activity of the past. Laetitia Paris is featuring the beauty of the nature, people and lifestyle on her site Fouchtra.com to which she added this week-end a smashing showcase built with Semiomantics Evolution.

Auvergne Images

All words in the world cannot express what great images can say, and no image can express what well displayed pictures can trigger. The frequently encountered dilemma is the following: in order to gain visibility we need websites which perform well on Google Top 10 and which therefore need to focus on optimized scripts and contents; on the other hand we notice that the nicest way to expose impressive visual media is by using video and images embedded in flash.

Laetitia Paris has added to her site at Fouchtra.com a new flash show case which allows her to offer the most smashing images and views to  Visitors of the Auvergne online.

Auvergne Volcans Photo Galleries

In fact, the new Auvergne Showcase features multiple photo galleries with original photographs by Laetitia Paris. Best of all: the high quality of the content can be viewed in smashing full screen mode providing the feeling of walking through the lands of the Auvergne. The site is still under construction but offers already a great surfing experience.

A must for all Auvergne Lovers

Enjoy the screen-shots and then head over to Fouchtra’s Auvergne Showcase from HERE

auvergne3

Bienvenue dans les Volcans d Auvergne

auvergne1

Volcan Auvergne

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Editing Flash Content for Semiomantics Evolution

Ycademy Seminar Participants are becoming rapidly familiar with editing xml code as well as with populating the Semiomantics Evolution Framework. During the first leg of the Seminar yesterday, image editing was the main task during the workshops.

Convert PowerPoint to Flash

The PowerPoint savvy participants at the seminar will get a little unannounced surprise today: a PowerPoint to Flash converter.

The tool will allow to convert PowerPoint to flv as well as to swf movies. Images can also be converted individually to swf in order to reduce the output size and to protect the work.

yorgodesign1

yorgo design

Image number 2 above on yorgodesign.com is a converted Welcome PowerPoint in swf. The Semiomantics Evolution Showcase feature can hold images and or swf movies :-).

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Custom Wedding Album by Hanno Coetzee

Fly beyond Facebook’s mediocre picture display and get your spectacular online wedding album built by Hanno Coetzee from South Africa!

There is not much to be said, except, that Hanno takes advantage of the Semiomantics Evolution Framework for this project, but have a look by yourself at Hanno’s work in progress.

Wedding Album Online

hannocoetzee1

Wedding Album on Semiomantics Evolution

Hanno has joined the Ycademy online Seminar to develop a new product for his ever more demanding customers: Semiomantics Evolution provides a framework allowing website developers to build the most spectacular multimedia enabled custom showcases.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Essex -New Website with Semiomantics Evolution

The beauty of England and of Essex in particular will be featured on Zo Nicholas’ new website: My Essex. Zo is building the site during this week-end’s Ycademy Seminar where participants are focusing on building flash sites to showcase themes of their choice.

Essex Showcase by Zo Nicholas

Here a first screen shot of the site which will showcase the beauty of Essex:

zonicholas1

Essex by Zo Nicholas

I am looking forward to seeing more of what’s hiding behind the fog …:-).

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.