How Jupiter Adapts Itself to the Latest Web Design Trends

Last Updated on

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.

In this article


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.

Full Height Edge Slideshow Web Design Trends

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.

Background Video Web Design Trends

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.

Edge Slideshow Video Slide Web Design Trends

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.

Parallax Page Demo Web Design Trends

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.

Masonry Demo Web Design Trends

We used this listing for two shortcodes in Jupiter.

1
Portfolio.  

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.


2
Image Gallery.  

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.


Image Gallery Demo Web Design Trends


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.

Preloader in Page Web Design Trends


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:

  1. Slide Effect
  2. Slide Vertical Effect
  3. Zoom Effect
  4. Zoom Out Effect
  5. Horizontal Curtain Effect
  6. Fade Effect
  7. Perspective Flip Effect
  8. 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.

Edge Slideshow Animation Types Web Design Trends


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.

Outlined Buttons Web Design Trends

Jupiter provides this as one button shortcode slides alongside with many other styles which you can see a demo, by clicking here.

Button Shortcode Outline Style Setting Web Design Trends


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.

Icon Box Demo Web Design Trends

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.

Sticky Header Web Design Trends

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 🙂

PageSection Id Web Design Trends
Section Id in Menu Web Design Trends


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 deisgn 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.

Was this helpful?

Related Topics

Related Forum Topics

There is no related forum topic

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket