Web Design Trends – Web design has been changed drastically over the course of time, from simple static documents in the 90s to responsive design that covers different devices and browser sizes. The Artbees crew has done its best to keep up with latest web design trends in Jupiter and make it a state of the art WordPress theme.
Web Design Trends
In this article we are going to mention some cutting edge web design trends and describe how Jupiter could adapt itself to them.
Fullscreen Pages
You may argue about going big on website pages. That is using big media such as a background image or video that takes up the whole screen with a big title and brief text. But this is actually becoming very popular these days, and you see many people using the approach for their homepages.
We took this point seriously and tried to keep up with it; that is why Jupiter gives you a Full Height option for the Edge Slideshow shortcode, which you can use with a combination of transparent header to have a great experience. We actually used same idea at the homepage of our Main Demo.
To find out more about Edge Slideshow click here, and to know more about transparent headers please read this article.
Background Videos
Adding a video to a website would be considered a hard thing to do a few years ago as there was a need to use plugins such as flash or similar solutions. But with the introduction of the video tag in HTML5, things started to change and new ideas have arisen. Background videos are one of those new ideas which make your website very eye-catchy.
Jupiter provides this functionality in two ways. You can either use it inside an Edge Slideshow slide by selecting video as the type, or you can use the Page Section shortcode options to add the background video. Page Section shortcode allows you to add a self-hosted video or use video services such as Youtube or Vimeo.
Please click here to see a live example of a background video on our demo page.
Parallax Effect
The Parallax effect is when the background of a section on the website scrolls slower or faster than other sections of the page. This makes for an eye-catching effect which lately has elevated web design to a whole new level. Here you can find a demo page which uses the Parallax scrolling effect in Jupiter.
Jupiter gives this effect as a Page Section shortcode background image option. There you can set the speed factor to determine if you want the background to go faster or slower than the natural scroll speed.
Masonry Listing
Another new trend in web design is to tile the page with different items as an excerpt which will be linked to the inner pages of the website. This changes the conventional row/column relation and takes it a step further to make for beautiful disorder which feels more natural. Please click here to see a live demo of what a masonry listing is.
We used this listing for two shortcodes in Jupiter.
Jupiter has a Portfolio post type which gives you countless options to create a good portfolio page for your website. But better than that is the Portfolio shortcode, in which you can use the Visual Composer to add a listing of portfolios to a page. One of the listing options is the Masonry style as previously discussed.
The other place where you can use the Masonry listing is in the Jupiter Image Gallery Shortcode. You can choose from 3 styles of Masonry ordering there. The only difference is that the Image Gallery does not have a link to the inner pages, but instead it uses a lightbox effect to show a bigger version of the image.
Preloading
As more and more websites use complicated media and kind of heavy ones, the conventional loading of webpage which shows you bits of page when they load makes an ugly effect sometimes. Just think of a slider which is not loaded completely yet and there are misplaced images here and there in the page popping up, till the whole page loads and every thing go into place. To avoid such a side effect preloaders came into play.
Preloader essentially is a solid background color layer sit over website content with some indication of loading, such as numbers or loading circles or progress bars to provide a beautiful view while telling visitor that he/she needs to be patient till website loads up completely. After page is loaded completely that layer goes away and a fully functional website shows.
Jupiter gives you this functionality globally from Theme Options > Global Settings > Preloader. You can personalize your preloader layer with your own logo and other styling options there.
If you do not want to have preloader in all pages of your website, then don’t worry! You can turn it off from theme options, but you have option inside each page to enable it for that page only. You can find that setting under Jupiter Page Options.
CSS Animations
With introduction of CSS3 animations there is no need to write heavy Javascript code to show animations in the website. Now state of the art browsers can handle animations with css which will have much better performance comparing with old methods.
We also tried to use this new technology in Jupiter. Nearly most of animations you see in Jupiter use CSS3. Such as Edge Slideshow effects which are:
- Slide Effect
- Slide Vertical Effect
- Zoom Effect
- Zoom Out Effect
- Horizontal Curtain Effect
- Fade Effect
- Perspective Flip Effect
- Kenburned Effect
All of those options have backward compatibility for old browsers using conventional methods for those browsers. You can set those effects in options of each slide in Edge Slideshow Post Type.
Outlined Buttons
We get used to buttons in different parts of the website including forms and sliders or even places like blog listing read more buttons. Most of them has solid background color or use system specific styling. New trend about buttons is to have them outlined or ghost buttons. Outlined buttons are transparent and only have surrounding border and text inside colored.
Jupiter provides this as one button shortcode slides alongside with many other styles which you can see a demo, by clicking here.
Icon Boxes
Websites use a combination of Icon with preceding description text as grid blocks in home pages a lot these days. That is because font icons already used world wide which gives the liberty of having different sizes and colors for icons without degrading or the need to change image each time. That is why icons play a big role for websites nowadays.
Jupiter’s answer to this trend, is the introduction of Icon Box and Font Icon shortcodes. You can see a demo of this feature by clicking here. To setup your icons for each icon box you can go to Jupiter > Control Panel > Icon Library and search for your desired icon to use.
Fixed Headers
Having a minimal version of header section of page, always at hand even if we scroll down the page, is one of widely used concepts of web designs lately. This comes handy especially for One Page websites which navigate between menus by scrolling up or down.
You can go to the main demo page of Jupiter and scroll down the page to see the effect. As you scroll, top header navigation and a smaller version of logo stick with you always, so you can easily access them even if you are way down the page. That is why we call this option Sticky Header and you can enable it from Theme Options > Header > Sticky Header.
One Page Websites
One Page websites are popular among artists, photographers and lately even company websites. The concept is easy and uses scrolling animation. All content of the website is added next to each other in vertical way, and there is no inner page for the website. Menu items are added inside sticky header and link to different sections of the page with links like this: #sectionid . Upon clicking the menu item whole page auto scrolls to desired place which that section sits. To see a demo of one page website please click here.
Creating one page website is a breeze in Jupiter. You just simply add a page, and using Row or Page Section shortcodes add your section. Then you assign IDs in options of those rows or page sections. After that you create a menu and link to those ids and that’s it! You have a one page website 🙂
Being Responsive
The fact that your website should be responsive and changes it’s style to suite device window size is not a new thing anymore. Actually it is kind of mandatory thing as people use different devices to visit websites in modern time, such as smart watches!
The point of this section is to emphasize that Jupiter is a responsive theme and all points mentioned above work seamlessly on tablets and smart phones.
We know that there are plenty other points which we can mention regarding new web design trends, that is why we encourage you to take part in making this article better and richer. So please kindly use the Article Feedback feature and give your suggestions and case scenarios. We will surely include your ideas here if we see it fit.
