5 Reasons Why You Need Wireframes When Designing a Website.
Thinking about designing a new website but don’t know where to start? A wireframe is a quick, simple, visual representation of what your…
Boys & Girls Clubs of San Antonio Website Refresh
We redesigned Boys & Girls Clubs of San Antonio’s (BGCSA) website to bring the company’s quality of care to life. Throughout the site…
3C Industrial Landing Page Re-Design
While waiting on the main site’s build, we redesigned 3C industrial’s landing page. This page is meant to extend and establish the…
Translation Options for Your Website
We often get asked what the options are for translating a website. When determining which option works best for your business, it’s important to consider both the quality of the translation as well as the amount of work it takes to translate and maintain the text. Below you will find three options for creating a multilingual website.
Localization
Localization creates a geo-targeted microsite. This option gives you an enormous amount of control, but also requires a lot setup time. Localizations utilizes the user’s location to determine which language the page should be presented in. This allows you to choose how information and content are presented to each group and can be a great solution for businesses with a global reach.
PROS
- Customized experience for each region
- Provides targeted content
- Control of translation quality
CONS
- Time consuming – requires manual translation
- Most expensive option
Microsites
Microsites allow developers to create alternate versions of pages in different languages. Plugins such as WPML (WordPress Multilingual), make this task much easier. These plugins use the browser’s preferred language to call the page that correlates.
PROS
- Uses browser’s preference to determine language
- Control of translation quality
- Can translate custom post types, widgets, menus, and more.
CONS
- Time consuming – requires manual translation
- Can be hard to manage with a lot of pages and multiple languages
Machine Translation
If time and resources are a factor, machine translation is most likely the best solution for you. Machine translations use plugins such as Google Translate to switch between languages at a click of a button. The limitation to this option is the translation quality. Most plugins do not allow you to edit the translation, but machine translations are getting better every year and are a great budget-friendly option.
PROS
- Easy to set up
- Easy for users to operate
- Doesn’t require manual translation
CONS
- Less accurate translation
- Doesn’t allow for customization of the text
6 EXAMPLES OF ELEMENTS OF ILLUSTRATION USED IN UX DESIGN
In the past two or three years illustration has become a hot commodity in design. And for good reason. It creates visual interest and can pique a user’s attention pretty well when used.
1) This piece by Anthony Miller for Brass Hand’s homepage is a pretty good and cool example of the minimal look of illustration in UX design work.
2) This piece by Selecto on Dribbble is also a really great example of illustration and UX design complementing one another.
3) Sweet Ice Cream by Outcrowd.
4) Environment Protection Community Website by Tunik
5) Hiring Artists Website Design by Tubik
6) Product Management Landing By Muhammad Aseif
3 WEB DESIGN BEST PRACTICES TO FOLLOW
Contrary to what many believe, the main goal of a web designer isn’t to just make a website look pretty, it’s to attract visitors and help win over new or increase sales. That’s why so much attention gets paid to items like search engine optimization. Increasing page views is a start, but there is another part to the equation. Following these design principles will help you maintain engagement, generate conversions, and increase your website’s worth.
#1 KEEP IMPORTANT INFO ABOVE THE FOLD
One of the first rules every web designer learns is to keep the most important information above the fold. Do so increasing the chance of making an impression on the user. Another benefit is search engines, such as Google, like to see the most important terms in headlines and opening paragraphs. More visitors will see the top of your website than potentially any other part of your business, so make that real estate count.
#2 BE CREATIVE, BUT NOT CONFUSING
Creativity can be tricky when it comes to web design. On one hand, standing out from a crowded market is a must, but going too far can actually hurt usability. Visitors aren’t going to convert into leads or sales if they become frustrated in their search for solutions. When in doubt, stick with variations on web design staples, or at least test offbeat ideas thoroughly before overhauling your website with an unusual concept.
#3 GUIDE VISITORS TO IMPORTANT VISUAL ELEMENTS
Users search their environments for clues to context, meaning, and even danger. This means web designers are able to guide visitors towards certain prompts or ideas. Subtle cues could involve faces tilted towards titles or calls to action. More obvious methods involve using bold colors or even arrows pointing users in a certain direction.
3 Benefits of Website Animation
There’s no denying that animations have been taking over the web design world these last few years. Using animation effectively can help increase engagement, improve usability, and increase sales. In this article we will explore three benefits of utilizing animation in your website design.
Increase Engagement
Animations are a great way to increase user engagement. Animating website elements such as buttons can focus attention and increase clicks and encourage the user to explore the site further. Incorporating animations in a way that the user can interact with creates a more satisfying experience.
Enhance the Brand
Well thought out animations can help enhance any brand. 7UP utilizes a clever bubble animation in this page to showcase how light and refreshing their sparkling lemonade is. Even though the animation is simple, it adds an airy quality to the page and also directs the eye beautifully to the main headline.
Better User Experience
Since attention spans are so low, user experience is extremely important. Utilizing animation to help users find what they are looking for can drastically increase usability.
There is a growing trend to have the top section of landing pages take up the whole screen. The problem with this is that it can look like that is the only part of the page and users don’t see any content below it. One simple solution is to use animation to direct users to scroll down like Violetta. The animation is subtle, but it still lets the user know there is more awesome content to be seen on the page.
Do you have a project in mind? Let us help you bring it to life!
Alamo Fireworks Website Redesign
Below is the Alamo Fireworks website redesign. We created the site to engage users in a fun and unique way by including hover effects, mouse parallax, and even a section where you can shoot off your own fireworks! The website is fully responsive, ensuring a great user experience no matter what device you’re on.
Let us help with your next project. Contact us today!
Hooville Website Design
This is the Hooville website redesign, we wanted to really make it engaging for the user by using plenty of images, patterns, and iconography. Our sites are fully mobile friendly to ensure anyone can get the information they need and have a great experience.
Like to know more?
Contact us and let us make your project shine!
An Intro Into CSS Animation
CSS is extremely useful when you just need a simple animation and don’t want to dive into JavaScript. In this article we will introduce you to key concepts and the basic structure of CSS animation.
Keyframes
The first step in creating CSS animation is to declare your @keyframes rule. The @keyframe rule is how you control your animation from beginning to end.
Below I have created an animation called ‘example’.
Once @keyframe ‘example’ is declared, we use percentages to control the animation. 0% is the beginning, while 100% is the end of the animation.
Within this step we also need to specify what property we will be animating. In ‘example’, we will be animating the color of some text from red to orange to yellow and then to green. There’s no need to worry about the transitions, CSS will take care of that for us.
Attaching the Animation to an Element
Once a @keyframe rule is declared, it can be used by any element on the page. We’re going to be using it with an <h1> tag.
The <h1> tag we are animating
In order to use our animation on the <h1> tag, we need to use CSS to set the animation-name property to have a value of ‘example’.
Customizing
There are eight animation properties used to customize your animation within CSS:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
If we want our animation to take 4 seconds to complete and repeat continuously, our CSS would like this:
And our animation would look like this:
See the Pen CSS Animation Tutorial - Color by Alex Fore (@alexTribu) on CodePen.
Easing
The last concept we’re going to look at is easing. Easing is used to create a more natural animation.
To specify the type of easing we want to use, we need to set the animation-timing-function. Some of the values that can be used are:
- linear
- ease (default)
- ease-in
- ease-out
- ease-in-out
See the Pen
Animation Tut - Ease by Alex Fore (@alexTribu)
on CodePen.
Now let’s set the animation-timing-function property to ‘linear’ to see the difference.
See the Pen Animation tut - linear by Alex Fore (@alexTribu) on CodePen.
Using ‘linear’ causes the animation to maintain one speed throughout the entirety of the animation. Linear animations tend to feel robotic and are best to be avoided.
Conclusion
Now that you know the basics of CSS animation, it’s time to go play around with some code. You can create your own or feel free to play around with our CodePen
Like our work?
Contact us and let us make your project shine!
CONTACT US
210.209.9209
hello@wearetribu.com
801 E. Quincy St.
San Antonio, TX 78215
The Tribe Newsletter
Stay up to date with the latest from our Tribe, celebrate achievements with us, and soak in new marketing insights.