As we all know content is king.
A sticky menu bar – however practical – can distract from the page content. SlideUp removes that distraction.
Andrew has been working on SlideUp for a couple of months now – I beta-tested it in October already. SlideUp is a stack that will allow a sticky menu (or any other stack for that matter) to slide up off the screen as the user scrolls down the page, but to slide back into view as soon as the page is scrolled back up by a few pixels.
New in the final version of SlideUP are four different animations. The menu can flip up off the page and back on again; bounce, swing or gracefully slide. The HUD has settings for scroll distances – the distance in pixels that the screen needs to scroll down for the menu to disappear or up to re-appear. The animation speed can also be set.
Andrew has commented that SlideUp does not use Headroom.js, which a few people have assumed. Headroom.js is a fixed only header effect and Andrew was anxious to build this stack with the sticky compatibility that we tested during the summer. Rather than hack Headroom.js to do so, Andrew wrote slideUp.js from scratch.
SlideUp incorporates touchscreen detection. If a mobile device is detected, the 3D animations are disabled and degrade to a simple slide animation.
Oh, and did I mention that SlideUp will work with any stack within reason – it's not restricted to menu bar's.
I've been looking at diagonal lines as a design element for my next website.
I now need to look no further.
With TILT from MultiThemes, Michelangelo has answered a lot of my questions. An intriguing theme, built with parallelograms – and responsive too. It has been especially optimised for Nexus and Galaxy tablets and has options for the iPad and iPhone. How cool is that?
TILT's homepage didn't appeal to me when I first opened it, but zapping through the demo site, the whole design grew on me. Upon opening a page you are presented with a full-screen image. The page content will then slide up onto the screen or fade in, leaving the image visible through a diagonal cut-out. The result is pages that really grab your attention. The page animations can be disabled.
TILT incorporates a couple of interesting and unusual features. First: When the screen is reduced to tablet or smartphone size, a mobile menu is activated – it slides in with its own triangular container and activates a dropdown where all pages and sub-pages are visible. The second unusual feature: Three Extra Content Areas [ECA] can be activated on each page – but ECA 3 can be implemented as an accordion, triggered by a text or Font Awesome Icon. Finally, RapidWeaver galleries feature round thumbnails instead of the standard rectangular images.
TILT has settings for 7 front and 7 background colours (for the parallelograms), 6 background images a number of background tiles and is delivered with 13 different different fonts.
I'm not keen on having to choose 'Colour 1' as opposed to 'Purple' or 'Light Purple' and as a typographer, I like to know if I'm working with Abel or Open Sans instead of 'Font 12', but that is just a matter of personal taste.
I searched for a long time for settings for the standard paragraph font without finding it. Michelangelo has supplied a PDF-handbook on the DMG, that explains not only how to set up fonts, but also code examples for animating headlines and the content of ECAs. The demo site is also included as a RW6 Project for your reference.
TILT is available for an introductory period with a 25% price reduction.
It is impossible to contend the value of a flawlessly designed logo.
If a brand is to be conspicuous amongst dozens of competitors, a memorable logo is vital. You only get a single chance to make a first impression and, more often than not, it is a company logo that a client will first encounter. The logo may be on a webpage, a letterhead, a business card or even a goods-vehicle. The logo is a decisive visual clue to evaluating a company and its products.
With very good reason, a logo is sometimes referred to as an ‘identity’. A logo is the visual representation of a company or organisation and is capable of communicating a message. In some cases the message is subtly hidden.
See: Vaio; FedEx; Amazon
A logo is not simply an attractive graphic printed next to a company’s name. It is an essential brand element and carries recognition value. Consider the following:
• 70% of the world’s population will not only recognise a ‘Coca-Cola’ or ‘Pepsi’ logo, but also associate the logo with a specific product.
• An invoice that flatters through a letterbox will often invoke a groan as soon as the logo on the envelope is recognised.
Hundreds, if not thousands of designers pump out large quantities of poor logos for a wide spectrum of competing organisations, proving that logo design can be a difficult process.
Before the design process can begin, we need to evaluate a client’s objectives and the values they wish to represent with the logo. Target demographics and culture are decisive factors that influence a brand's image. What does an organisation want to communicate? Does it have a distinct personality? Is it serious, or playful? What makes it unique in relation to their competition?
Not only must colours, fonts and images be taken into consideration but also placement and production processes, etc.
1987 Kurt Weidemann redesigned the logo for the Deutsche Bahn [German Railways] — at first glance, all he did was to invert the logo from ‘DB’ in white on a red background to ‘DB’ in red on a white background within a red frame. His fee was €200’000. The fee sounds rather high for the disclosed results. However, consider the fact that the Deutsche Bahn saved hundreds of thousands of Euro every year afterwards – in sieve-printing-inks alone – and you will recognise why the placement and the production process can be so important!
Thanks to the the power of the internet, more logos have escaped into the wild than ever before and this presents us with the challenge of being unique.
Let’s take a look and see what it takes to help your client stand out from the crowd by designing an outstanding, high quality logo.
Keep it Simple
Avoid designs that are too complicated. Gradients, shadows and effects will that look great on your computer monitor are often difficult to print on different materials. Consider the fact that a logo will be copied, perhaps telefaxed or be published in a newspaper. A simple logo design guarantees easy reproduction.
A cluttered logo can affect a business negatively. The most iconic logos are usually the simplest. A simple, memorable design is effortlessly associated with a brand and set it apart from competitors.
See: MacDonalds; Calvin Klein; Nike; WWF
Keep it Competent
Logos should characterise the competence that is expected of your business. A logo transmits the nature of an organisation. Are you designing a logo for a serious business, or one that celebrates their unconventionality? Are you appealing to a conservative or a progressive audience?
A lawyer, for example, requires a logo that is formal enough to be taken seriously. This applies to all serious professions such as councillors, doctors or architects. Businesses that cater to children or adolescents, can be appropriately playful to make products or services notable and unforgettable to their targeted age-group.
See: Corbus Lawyers; Young & Rubicam; Disney; Toys R’ Us; Black & White
Keep it Unique
The aim of a logo is to make an organisation easily identifiable. Market research is essential to ensure that your logo can’t be confused with that of another business. Plagiarism should be avoided at all cost, but parodies or imitation should also be shunned. Your logo must appear unique, particularly when placed side by side with brand competitors.
See: Quark Inc./Acone/Scottish Arts Council/Midas productions; ArtFox/REDFOX
Paying large amounts of money doesn’t necessarily guarantee a unique trademark.
The NBC unveiled new logo in 1976 The design had cost $600,000, an enormous sum in today’s dollars. Immediately after the well-promoted unveiling, the Nebraska Educational Television Network pointed out that they had already been using the same logo for several years. The logo design had cost them $100. Since both companies were broadcasting businesses, NBC was motioned to pay a settlement with the Nebraska ETV Network.
Keep it Classic
Avoid following emerging trends. A well-designed logo will withstand the test of time, Photoshop’s embossed text will not. Ignore current design trends and gimmicks and concentrate on the design itself.
The biggest cliche in logo design is the dreaded “corporate swoosh,” which is nothing more than a parody of the Nike swoosh.
See: Shell; Ford; Canon; Coca-Cola
Keep it Consistent
Choose fonts with care. When designing a logo, fonts are equally as important as colours. An inappropriate font can radically alter the message the logo is supposed to convey.
Use fonts sparingly. Multiple fonts lead to a confused logo that looks anything but unified.
Use equal care when choosing Corporate colours; both fonts and colours will have a ripple effect throughout the corporate appearance and neither should be taken lightly nor put off until the final stages of the design process.
A logo design is just the beginning of building a successful and recognisable brand. Be sure that it stays true to the company's values and intentions by building and following a set of brand guidelines (Corporate Design).
See: Mercedes Benz; Marlborough; Apple
A question that I often ask myself: "How do I get all this information onto one page, without overwhelming the visitor and destroying the design at the same time?" One solution is to use an accordion.
We're spoiled for choice when it comes to accordions – there must be dozens of them. And here comes yet another. However, how many times have you spent an hour or more trying to get the styling of your accordion to suit the page design and then decided "No, it's not going to work with this stack …"
Ivy from ElixirGraphics is a different story altogether! It is an accordion that has a collection of styles already implemented. Drop the stack onto your page; set the number of dropdowns you need; drop in your content; choose from one of the 21 (twenty-one) built-in styles; go!
With so many pre-defined styles to choose from – some of them geared towards your Elixir themes – the chances are, you won't have to spend much time setting up the formatting. If you feel that none of the included styles match your page design, you still have the possibility of manually setting up Ivy by choosing 'Custom'.
One thing you will immediately notice is Ivy's simple elegance. Adam's stacks and themes are generally well designed. Ivy is no exception - it manages to look 'just right' with any of the standard styles. The colour combinations all feel equally harmonious.
Setting up the stack is a breeze. The HUD has settings for the number of assets and their style, the location and type of indicator that displays the accordion's open or closed status and for the indicator's style. A lot of attention has been paid to fonts – not only can you choose custom fonts for both the label and the content, but also set separate, optimised font sizes for mobile devices and desktop.
Two functions that you may have missed elsewhere, but are really useful – You can choose to display a slider, which will open all of the accordion items at once; and the content can be set to remain open (Multi-view) or to close automatically when the next item is opened.
Three examples of Ivy in operation - two with standard and one with custom colours.
Ivy is well thought out, easy to use and - thanks to its many style definitions - fast to implement. The stack is fully responsive. It doesn't have the bells and whistles of some other accordions, but I'll happily leave out the bells in exchange for the simple elegance.
For a limited period of time, Gary from Doobox has halved the price of his stacks bundle!
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16