Trendwise with Semiomantics XO2012

In a world of infinite choice, we all have our personal preferences when it comes to creating the Web Design for our personal websites and blogs – and this is exactly what many of our customers will tell us, especially if they have a business with set colors, fonts and logos. Of course, there are also those who haven’t thought about this issue, who may not want to be bothered with it (as this takes ample time and thought) and who expect us to suggest, advise and guide. This is where we should know and focus on current trends, put our personal priorities on the backseat, and design something fresh, modern and appealing where we are absolutely “Trendwise with Semiomantics XO2012″, which is currently going through a testing phase and will soon be released.

Most importantly, we need to think forward to adapt to the incredible developments and momentum on the mobile web: can people see our web design work on their iphones, smart phones and tablets? This is currently the driving power behind many decisions and as we want our customers to get the traffic and results they expect, this is what we need to focus on and ensure that they too see the advantages of certain essentials they might not initially agree with.

It’s all about functionality and thinking customerwise: let them see what your website is all about fast and in an attractive way, make navigation clear, quick and easy like a dynamic show. And let there be balance!

Trendwise with Semiomantics XO2012

With the new trends 2012 having been set, how can we at Web Design South Africa be trendwise with Semiomantics XO2012, the best WordPress based script to be released soon, and give our website or blog a New Look 2012?

How to give your Author Blog a Trend 2012 Look

Here are a few pointers as to how to give your Author Blog a Trend 2012 Look:

1. Color Trend 2012

I already wrote about the Color Trend 2012 HERE.

To repeat it quickly, the color of the year 2012 is a warm orangy red called “Tangerine Tango”.  It’s not too far off the color I am always using in my personal color scheme that marks “Web Design with Passion”. However, there are other trendy colors like ‘solar power’ and the ‘sodalite blue’ I used in my example above, in connection with ‘tangerine tango’.

Here you want to think of backgrounds, fonts, menu, graphics, links, hover effects etc. – however, don’t overdo it when setting it off against another shade or complementary color. What I learned in Typography many years ago with one of Europe’s two leading authorities in the field and a true friend, Professor Tuenn Konerding (Staatliche Kunstakademie Duesseldorf, Germany), still applies today: experiment massively… but then reduce, keep it simple, don’t use more than 2… maximum 3 colors.

I wish I had a better photo – but I am happy I can call at least this one up – for an extraordinary mind and spirit that left our planet far too early…

Interesting also the trend towards one-page websites and a comeback of the magazine theme (full layout Semiomantics XO). Of course, Apple-style layouts are still en vogue as they are a modern classic and simply good.

2.  Typography 2012

The focus is on bold letters and custom fonts that can easily be read on mobile phones. Interesting here the Google Font Library that can be added in form of a plugin and loads fast while making the look of the website more appealing.

Textures, shades and reflections are ‘in’ as well…

 3. Large High Quality Images

Less text but large, high quality images – meaning all forms of sophisticated Media Design – be it photos, graphics, videos… – especially for backgrounds but also for graphics, sliders (we will come to these) and whatever you integrate into your Website Design to attract and captivate.The use of light or shadow boxes – where pictures can be enlarged in an overlay-  is very much in the trend.

Actually, we have been ahead of this trend with Semiomantics XO 2011 already, and particularly with our comprehensive work on Evolution, my personal favorite… yet unfortunately on Flash which is currently not seen on mobile phones due to power plays between the ‘big boyz’ … but this too shall change one day once even they get it that ‘competition’ is out and ‘cooperation’ is in to save our planet – and this is NOT a trend but a Truth! Ask Steve on Cloud!

Meanwhile Evolution will… well, evolve!

4. Sliders are en vogue

And yet another feature where Semiomantics has been well ahead of the trend: sliders are en vogue! Besides that, in my view they are brilliant, practical, interactive, attractive, seen on the mobile web and add to the functionality of a website. At tleast the ones we use – they do come at a cost, but it’s well worth it – quality always had its price!

5. Connect to Social Networks

Finally, websites and blogs need to offer easy ways – meant are rather ‘loud’ icons (… I leave this to your personal taste…) – to interlink and connect to Social Networks like Twitter, Facebook, Google + etc. Today, people look out where they can connect, follow, share and register … and so the cybernet expands continuously and I sometimes wonder what all of this really means at the end of the day and for our environment! But that’s a topic for another day!

For now… let’s be aware of current trends and advise customers accordingly… there’s lots to play with!

Color Trend 2012

So what’s the Color Trend 2012?

Clearly, neutral colors are out; we stay with the reds, the pinks and greens and especially bright colors with “Tangerine Tango” leading the hot palette… with a tan-tan musical note to it! Absolutely perfect for South Africa where a beautiful summer had us dance into the new year!

Seems they made a round in my garden… Web Design with Passion is fully in the trend! Now here’s for a tango!

Trend color two is “solar power” – a yellow that’s again a key color, this time with a maizy hue, totally within the global trend of a ‘green economy’ and definitely part of the above photo… You may even find a soft margarita green.

Color Trend 2012

Besides the Color Trend 2012 the emphasis is on being ‘bold’ and grabbing the viewers attention – which at the end of the day is the sense of every graphic, video, ad or website design! No wonder that the fonts should have depth in one way or another, meaning shadows, 3D effects, transparencies, gradients – just make it special!

Best is to extend this attitude across the background and add graphics, high quality large pictures, animations, videos, media… grab your visitors… and yes: retro and vintage are celebrating their comeback and if that’s what you like: integrate it and add your personal touch!

Web Design Workshop 18 Image Filters

Filtering images allows to change the look and feel of an image with just a few mouse clicks. While a few filters can be applied via CSS, I don’t really recommend it as they will not work in all browsers and if you load the corresponding code for 3 browser types, your code will not validate as two of them are proprietary stuff. In as much as I am concerned I just use opacity elements and code them for IE and FF in rare cases.

Let’s look at what some of the most popular filters do to a picture:

1. The Picture

The Marble Stadium by Night

2. Blueprint

3. Bronze

4.Cartoon

5. Color Rotate

6. Color Rotate 2

7. Color Sketch

8. Animation

9. Grayscale

10. Inkstamp

11. Neon

12. Pixelate

13. Popart

14. Sepia

15. Soften

16. Tint

Join tonight’s Web Design Workshop at yorGOtalk to learn how to quickly implement filters.

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.

Have a look at:

• Google Top 10 Online Seminar July 2009
• Hanno Coetzee Branding
• BuddyPress
• Nikon Coolpix P90
• YORGOO Daily Mail March 30, 2009

Developing a transparent WordPress Based Photo Blog, I got inspired to use some elements in a Grunge environment. It’s creative, it’s fun, it’s the Semiomantics XO Theme for WordPress.

Grunge Background

The first step is to create a grunge background:

Grunge Background for WP

This background is 1680 x 1250 pixels big and has a weight of 130 kb only.

Transparent Header Footer and Content Backgrounds

Step 2: make your backgrounds transparent and set opacity to 70 %.

Fancy Fonts

Add some fancy fonts for h1 and h2 using the Fontburner plugin.

Fancy Fonts for h1 and h2

Background Opacity and Hover Function

It is not easy to read content on colored backgrounds, therefore we add a hover function to show white backgrounds on left content and sidebar.

Save load by Scrolling over the Background

No vertical tiling is needed, also on long blog posts when the content scrolls over the background. We fix the background attachment (background image).

Header Transparency and Site Title

To get the header effect I have loaded a transparent header png with no content and added a top margin to adjust the position of the content.

The blog title is painted on the background with position top left to allow display on any monitor irrespective of resolution and size.

Transparency Variations

Your creativity is the limit. You could create an overlay look by adding a black background with 80% opacity:

Transparent Overlay Hover

Try and enjoy!

The site header is an important branding element. Logo, font and colors, eventually other visual elements are used to build a positive, recognizable image.

Yorgo Nestoridis Brand

A name can be a brand and if Yorgo Nestoridis wants to be a brand label, then that brand needs to be defined. What is Yorgo Nestoridis? It’s a person, a story, a product, a way to do things, a mission, a quality or an identification tag for all the aforesaid.

In this case, Yorgo Nestoridis stands for the human element behind product labels such as Semiomantics, YORGOO or related products.

Yorgo Nestoridis Logo

The brand elements are a logo in form of a picture or it’s derivatives:

Yorgo Nestoridis

Yorgo Nestoridis Brand Logo

[Show as slideshow]

Yorgo Nestoridis Font

The handwriting font is Dali for the signature and eventual other use at least for the time being; an original font is under construction.

Yorgo Nestoridis Color Scheme

Basically the web site color scheme is white to black with gray shades in between. Color accents are set with red #B30000 or blue #0000b3, black color can be replaced by black-blue #000125.

Yorgo Nestoridis black-blue color and red #b30000

The example for the Design web site does not use the Dali font as another handwriting font has been used for the site name (Art Decor).The name “by Yorgo Nestoridis” is in Tall Film.

Other schemes namely used for some products are the black-beige theme as seen here:

Yorgo Nestoridis black-beige color scheme

Beige color is #DECFAB.

This header can be created easily with simple means using GIMP, Photoshop or even Web Graphics Creator.

The site header is an important branding element. Logo, font and colors, eventually other visual elements are used to build a positive, recognizable image.

Yorgo Nestoridis Brand

A name can be a brand and if Yorgo Nestoridis wants to be a brand label, then that brand needs to be defined. What is Yorgo Nestoridis? It’s a person, a story, a product, a way to do things, a mission, a quality or an identification tag for all the aforesaid.

In this case, Yorgo Nestoridis stands for the human element behind product labels such as Semiomantics, YORGOO or related products.

Yorgo Nestoridis Logo

The brand elements are a logo in form of a picture or it’s derivatives:

Yorgo Nestoridis

Yorgo Nestoridis Brand Logo

[Show as slideshow]

Yorgo Nestoridis Font

The handwriting font is Dali for the signature and eventual other use at least for the time being; an original font is under construction.

Yorgo Nestoridis Color Scheme

Basically the web site color scheme is white to black with gray shades in between. Color accents are set with red #B30000 or blue #0000b3, black color can be replaced by black-blue #000125.

Yorgo Nestoridis black-blue color and red #b30000

The example for the Design web site does not use the Dali font as another handwriting font has been used for the site name (Art Decor).The name “by Yorgo Nestoridis” is in Tall Film.

Other schemes namely used for some products are the black-beige theme as seen here:

Yorgo Nestoridis black-beige color scheme

Beige color is #DECFAB.

This header can be created easily with simple means using GIMP, Photoshop or even Web Graphics Creator.

To brand my site “Design” I start by applying a color scheme.

Design Colors

Here are the color codes for Design:

Blue #000125
White #ffffff
Red #b30000

Design Colors output

Here the visual representation of the above colors on the site:

Fitness colors by Ute Schaedler

Colour White

In the western culture white symbolises cleanliness, innocence, purity and peace.  White is associated with brides, christenings babies and the dove of peace. In the eastern cultures white is used for funerals and mourning.

White is for…

After a long day white is for peace

As white is a cool colour it also signifies calmness, thus often used as a website background in web design. It also contrasts well with dark colours like black and dark reds.

Read more..

• Web Style Sheets 2
• Web Style Sheets

How to Edit a WordPress Wiki

In yesterday’s Online Workshop, we went into “How to Edit a WordPress Wiki” – amongst others… and as some members couldn’t attend and asked me about it today, here are the basic considerations and steps.

First of all, click on the image above and have a look at my screenshot to see what enabling and using the WP Wiki plugin actually does – from a visual aspect on your Semiomantics Author Blog. Look where the snaking arrow is pointing. See the little box featuring the headlines of the Content of this post?

Why use a WordPress Wiki?

So why use a WordPress Wiki in the first place when you are showing your headlines anyway?

Good question… but the secret is again in what plays behind the scenes, in the mysterious intricacies of code and… the way it communicates with Google. Although this little Content container may allow a quick practical overview as to what main topics are being dealt with within the post, much more important is that Google search engines pick them up very easily and in a very clear and concise way… if set up correctly that is – and they will send us flowers… meaning support our Semiomantics powered websites and blogs on their way to Google Top 10!

How to get a WordPress Wiki?

Simply go to the Dashboard of your Blog, click on Add New under Plugins, and pull in the WP Wiki, instal and enable.

You will find Wiki Settings under your settings on the left side of your Dashboard. Set them to your requirements. I just have a number to reduce what I want to show… but most importantly, when you now go to a post – existing or new – and scroll all the way down, you see right at the bottom 2 items you should now tick to enable the WP Wiki Contents Box on your post:

Firstly, “This page/post is a wiki friendly page and may be edited by authors and contributors” and

secondly, “Enable Table of Contents”.

If you go to an existing post – that has at least a <h2> headline and ideally some <h3> sub-titles – looking at it from outside on your blog as a reader would do, you now see the Contents box.

If you went to a new post, you need to write a post first, including an <h2> as a minimum – otherwise nothing will show – and then enabling the WP Wiki at the bottom by ticking the two tick boxes as explained above – you will have the same effect.

How to Edit a WordPress Wiki

The question now is: How to Edit a WordPress Wiki?

Why would you want to do this?

Well – as you read in my previous post “The Color Pink” – once you are into more sophisticated Blogging and you apply a specific color scheme – in other words Color Branding – to your Blog or Website, you want your WP Wiki to integrate into your blog.

If your background colors are all in the yellows – as on Joe Ceguna’s Blog – you don’t want your WordPress Wiki to stand out in glaring white like a violent ad… you want the background to be tone-in-tone for instance, and you may want a little fine frame in another color of your color scheme around the contents, or a bold dark tab with Contents written on it… or not, or a double line or no lines at all… and when people hover with their mouse over a title you want it to change in one way or another…

Well all these details can be easily adapted when you go to your SmartFTP and open the plugin under themes.

In the WordPress Wiki plugin folder you will find – amongst other files – the style.css.

Open it with PSpad and work your way through it – it’s easy enough. The best way is to implement one change at a time. Say you change the background from #FFFFFF (white) to #222222 (grey-black) because your blog is black or you want a black box. Just do it on the stylesheet, save and refresh your blog to see how it looks.

Once satisfied, move on to the next styling item, eg. the hover color. Maybe you want it to be a bright red, so change it to say #FF0000 – like here:

div.contents a:hover {
color:#FF0000;
}

Change the font-family if you want sans-serif fonts and here it’s coming in with serif fonts.

I wouldn’t fiddle too much with the padding etc as that looks pretty neat already as you see, but best is to save a copy of the original stylesheet and play with the new version until you see what you want – then your goal is reached: you’ve edited your WP Wiki to integrate perfectly with its surroundings and another big step in customizing your blog – or that of a customer – has been done. I hope this helped with your Website Publishing… and don’t forget:

~ without an >h2< heading nothing works.

~ Without an activated plugin nothing works.

~ Without ticking the 2 little ticks on your editor’s page where you write and edit a post, right at the bottom of it, and then saving it… nothing works.

Once everything is done correctly, it works :). Now wasn’t that a clever statement – duh????

And yes… without the server being up and running, nothing works either as I notice at this moment… but the good news is, sooner or later it will be back, so I will grab an apple and enjoy some South African sunshine! I just ricked those 2 little Wiki boxes right at the bottom and … Publish! See what it shows on my post… once it rises back into the virtual world :)

The Color Pink

After spending most of my day on PowerPoint researching how to best add a prepared mp3 audio file to a prepared slideshow – something I had previously created in the video format on Camtasia and where I know exactly what note has to come with which slide… and this attempt was enough to drive me up the wall today and I needed some fresh and cheerful Chi… and see what I got as a colorful snapshot featuring the color Pink! I mean PINK!

The Color Pink

The color Pink definitely gets its extraordinary vibrancy on this digital photo by its juxtaposition with the locust’s green! Especially as it has been raining most of the day, this was so bright one couldn’t miss it! Luckily, I wasn’t a hungry bird of prey or a merciless meerkat… as this would have been a delicious evening snack! Accordingly, the semi-transparent insect quickly climbed under cover after snatching a moment of sunshine to stretch its legs and warm up before the next shower went down.

All this to marvel at the magnificent color combinations Nature offers us if we just open eyes and look around us!

Color Branding

When starting a new blog or website for a customer, the color scheme is one of the first aspects we need to deal with in terms of the visible part of the website design.

Companies mostly have their Color Branding in place; in other words a color scheme we need to know and then observe throughout the Website Development.

However, sometimes a customer wants the Semiomantics Web Designer to choose the colors. In my view, almost all colors are beautiful… but there are colors that enhance others when combined with them – or they reach the opposite effect. This is something to be aware of and bear in mind – depending also on the target audience, especially its age… and the current trends.

If not too sure about your taste and skills when it comes to Color Combinations, use one of the many really helpful Color Wheels freely avaiable on the Internet. As usual, Google will help!

Lorcia Cooper at Monkey Valley Resort

Lorcia Cooper – South African dancer, choreographer and actress – features as “Erin” in the eTV soap “Scandal!” … a few episodes of which were shot at one of the most beautiful Filming Locations in South Africa: Monkey Valley Resort. You may take a virtual journey on their brand-new smashing website: CLICK HERE! You will want to pack your suitcases… garanteed :)

Lorcia Cooper at Monkey Valley Resort

I shot the above picture of Lorcia Cooper at Monkey Valley Resort while she and her film partner, Clint Brink, were relaxing on the deck of the “Crowned Eagle” high above Noordhoek Beach and the Atlantic Ocean. Living in paradise and working on “Scandal” – that’s what I call Lifestyle :)))

Color Photography

As I wrote in my earlier post: I love Black & White Photography as one can really focus on the dramatic effect using light and shadow and all the fine nuances inbetween.

However, it amazed me always how Color Photography allows us so many different ways of expressing what we want to convey. Of course, then there are Adobe Photoshop and Lightroom… however, a high quality picture needs to be at the base… From there, and based on individual life experience, we all interpret a picture or a photograph differently… as we would any work of Art.

I loved the soft expression of Lorcia that seems to flow over to Clint on this picture; it has a specific meaning for me in relation to what I understood about the episodes shot at Monkey Valley Resort these last days.

Top Secret… you will see it all on TV in January 2011!

Author: Bianca Gubalke, Art, Media, Publishing. Co-Founder of YORGOO, YCADEMY and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Read more...

• Hat for Brenda Baker
• Small Vegetable Garden Design
• Register a Domain Name
• Digital Communication
• Web Design

The above iPhone 4 Photo has been color adjusted. As mentioned earlier, the iPhone 4 renders pictures in a very warm tonal range, namely under outdoor high light intensity conditions such as at the beach. While the sky was blue and the small clouds just about visible, the original picture looks completely hazy, yellowish and out of the real tonal range.

The adjustments concern tonal range and a 2/3 blue color gradient.

iPhone 4 Photo Before

Posted from Vari, Attica, Greece.

iPhone 4 Photo Colors is a post from: iPhone 4 Photos All content Copyright © 2010 Yorgo Nestoridis. All rights reserved. Contact mail: iPhone (at) yorgo.net