Category Archives: Web Design

Web3: The Next Step in the Internet’s Evolution

Cryptocurrencies, Metaverse, Web Design, , , , , , , , , , , ,

Web3 has become an increasingly popular buzzword in tech circles. While some are fervent believers in its potential to change the internet as we know it, others are skeptical it holds the future. Still others have no clue what it is—and rightfully so. Web3 entails a set of online principles with potentially mammoth ramifications, but one of the major questions surrounding it is how will these principles take hold? Web3 could manifest in a variety of ways.

This week, we delve into how it may change the internet as we know it.

WHAT IS WEB3?

To answer this question, first we’ll explain the Web1 and Web2.

Web1 is the original version of the internet—think of it as a read-only version. In 1991, HTML and URLs allow users to navigate between static pages. After the millennium, the internet starts to become interactive. User-generated content gradually takes hold via MySpace and eventually Facebook, Twitter, and other social media platforms. This interactive version of the internet constitutes Web2, it’s a version of the internet in which users can both read and write via social media, Wikipedia, YouTube and more.

Tech conglomerates naturally turned Web2 into an era of centralization. Meta owns three of the four biggest social apps in the world. YouTube, the fourth biggest social network, is owned by Google, which accounts for around 90% of internet searches. Many question the ethics behind so much data in the hands of so few behemoths. Some have gone so far as to question whether the combination of big data and AI could diminish our capacity for free will, while other research shows that the targeted ad economy does not add much value and may in fact be a bubble.

In the face of these prescient concerns, the main thing that separates Web3 is the concept of decentralization.

DECENTRALIZED WEB

One of the main principles of Web3 is that it employs blockchain technology to decentralize data ownership and, in the words of Packy McCormick who helped popularize the term Web3, an “internet owned by the builders and users, orchestrated with tokens.”

The concept of digital decentralization gained massive traction since Satoshi Nakamoto created Bitcoin using the blockchain in 2009. Cryptocurrency has since become a household name and blockchain technology is finding adoption in a multitude of ways.

In Web3, centralized corporate platforms will be replaced with open protocols and community run networks, enabling the open infrastructure of Web1 with the user-participation of Web2. Everything is decentralized using the blockchain. Decentralization means that a distributed ledger manages financial transactions rather than a single server.

When going to a major social network like Instagram, rather than giving their data away for free, users could monetize their data and receive cryptocurrency for creating interesting posts. Users could buy stakes in up-and-coming artists to become patrons in exchange for a percentage of their royalties. Axie Infinity is a popular Web3 video game which uses NFTs and Ethereum to reward users for achieving in-game objectives. Games with real-life rewards are known as Play to Earn or “P2E” games—a major new trend in game design. It follows the overall goal of Web3—to put power in the hands of users and creators rather than major corporations.

CRYPTOCURRENCY AND NFTS

Blockchain technologies enable an economy powered by NFTs and cryptocurrency. Users can use cryptocurrencies like Ethereum to purchase NFT versions of real-life moments, memes, emojis and more. For example, NBA: Top Shot was among the first NFT projects from a major brand. Fans could purchase “moments” in NBA history, such as Jordan’s famous shot in Game 5 of the 1989 NBA playoffs first round, and trade them as if they were trading cards. It creates a community for fans using digital assets.

The digital art contained within NFTs can be copied but original ownership cannot be duplicated. It’s similar to owning an original Picasso—other people may have copies of the same art, but there is only one original.

Bored Ape Yacht Club may be the most successful NFT project—offering access to real-life parties and online spaces in exchange for purchasing their NFTs.

Another blockchain-powered phenomenon is Decentralized Autonomous Organizations or DAOs. DAOs are organizations that raise and spend money, but all decisions are voted on by members and executed using rules encoded in the blockchain. Famously, a DAO recently raised $47 million in a failed attempt to buy a copy of the constitution.

WHAT TYPE OF WEB3 WILL EMERGE?

With so much up in the air, it’s unclear what type of Web3 will emerge. Although decentralization promises to diminish the power of major corporations, these conglomerates still hold such endless resources that it’s hard to imagine them not finding a way to capitalize and maintain relevance.

Remaking the web won’t happen overnight. There are still major technical and regulatory hurdles which need to be overcome before Web3 becomes the golden standard.

Although we can’t predict how all this will shake out and affect your daily online experience, one thing is for sure—the internet is evolving.

How Artificial Intelligence Has Revolutionized Digital Marketing

Web Design, , , , , , , , , , , ,

Last week, we explored the real power of Artificial Intelligence. AI’s ability to comprehend complex data sets and form patterns enables infinite new possibilities for personalization through the analysis of digital activity. Within the digital marketing industry, AI has been nothing short of a revolution. Here are the top ways in which Artificial Intelligence is impacting digital marketing:

NATURAL LANGUAGE PROCESSING

Natural Language Processing (NLP) is a field that focuses on the ability for computers to process human language to the point where it can generate replies based on inferred meaning. Machine Learning has sharply increased the ability for machines to generate sentiments designed to not only seem as if they were written by a human, but that are optimized based on data to elicit a specific action or emotional response.

Digital marketers fret over when to reach out, what to say, and what channel is most appropriate. AI’s NLP abilities mean that the guessing game has come to an end. AI can analyze big data to decide upon what the best method, channel, and timing will be in order to foster growth, engagement, and sales.

NLP as a trend is on the rise. Angel.co recently valued the average NLP start-up at $4.8 million.

SEARCH FILTERING

In days of yore, Google search rankings were determined by human-created metrics and social media feeds showed posts in chronological order. Now, programs like RankBrain are vital to deciding the criteria for Google’s search rankings while Facebook’s DeepText creates your newsfeed.

ADVERTISING

Artificial Intelligence drives programmatic purchasing, which is when AI determines who to show ads to and when to show them. Removing the burden of purchasing analysis leaves marketers room to focus on crafting powerful messages.

NLP enables AI to understand (through numbers and sentiment analysis) the abstract criterion of “context” and to match individuals with ads based on context to maximize the chances of generating a click or purchase.

According to Ad Exchange, programmatic purchasing accounted for 67% of all global display ads in 2017.

PSYCHOGRAPHIC PROFILES

Perhaps the most anxiety-inducing example of Artificial Intelligence impacts not only digital marketing, but politics.

Psychographic profiles are data-driven psychological profiles of consumers designed to shed light on why they do what they do. Firms like CaliberMind and Cambridge Analytica have turned this into a multi-million dollar industry. Insights gleaned from psychographic profiles are intended to optimize the messaging of both political and commercial ads to induce a desired action from the viewer.

Cambridge Analytica has taken credit for influencing both the Brexit vote and the 2016 presidential election; however, many (including the New York Times) cast a shadow of doubt over the extent of their impact. Regardless, as long as there are insights to be gleaned from digital activity, psychographic profiles will only continue to develop.

SELF-DESIGNING WEBSITES

That’s right, AI has become adept enough to design websites based on data. Wix ADI created this personal trainer’s website and Grid has been designing websites since 2014.

CONCLUSION

Every application of artificial intelligence in digital marketing is relatively new. While these applications are increasing in popularity, expect them to also increase in efficiency and effectiveness as technology continuously advances.

SEO Pro Tips: Best Practices for Meta Descriptions

Web Design, , , , , , , , , , , , , , , , ,

Last week, we explored the art of perfecting title tags for SEO dominance. This week, we’ll explore another vital meta tag: the meta description.

The meta description is the text that appears below the link in SERPs, as below:

via Word Stream

Meta descriptions should be about 135 – 160 characters long, although Google has tested longer snippets. Any time quotes are used in the meta description, Google cuts the text off. To prevent meta descriptions from being cut off, it’s best to remove all non-alphanumeric characters.

Google uses meta descriptions to pull preview snippets on SERPs and return results when searchers use advanced search operators to match meta tag content, but unlike title tags, meta descriptions do not directly influence Google’s ranking algorithms for normal web search since meta description keywords are not ranked.

While meta descriptions do not directly affect SEO, they do indirectly impact it. The prominence of meta descriptions in SERPs makes them a very valuable UX component and a tool for enticing searchers. While keywords do not affect ranking, they are bolded in the meta-description, which attracts the eye and can help influence a searcher’s decision to click. Thus the use of keywords in meta descriptions can be beneficial to increasing Click Through Rate (CTR). The Click-Through-Rate is the ratio of searchers who click on a page compared to how many searchers see it. CTR is highly valued in search rankings. Since meta descriptions are one of the first things that a searcher will see, they can influence them to click, increasing CTR and boosting SEO.

The ideal meta description articulates the value proposition which a company or web page offers in a precise way while taking into consideration the competition that the page is up against in SERPs. It assumes an active voice and includes a call to action. Web developers can enrich a meta description by using schema markups like star ratings, customer ratings, or product information, to increase the appeal. See below for example:

Image via Google Support

Sometimes meta descriptions are unnecessary. Moz advises if a page is targeting between one and three high volume search terms or phrases, it’s best to write a meta description targeting users performing those searches. If the web page is targeting long-tail traffic (three or more keywords, like a blog with hundreds of entries), it may be best to let the search engines extract the relevant text from the site since they will pull text specifically targeting the user’s search. A blog might be targeting one audience in their keywords, but have content on so many topics, they can be found through any number of search terms. A meta description specified for a page with a lot of content may detract from the relevance that the search engine can create organically by pulling a text description from the page which is relevant to the specific search.

Like title tags, repeating meta descriptions or making them incomprehensible will result in penalization from Google. Meta descriptions can be tricky since they are longer and a bad meta description can be worse than none at all. With the right title tags and website content, meta descriptions can be a major UX tool to drive traffic to a web page.

SEO Pro Tips: Perfecting the Title Tag

Digital Marketing, Web Design, , , , , , , , , , , , , , , , ,

Over 100 billion searches per month are made on Google worldwide. Search Engine Optimization (or SEO) has become one of the top marketing disciplines for anyone trying to drive web page traffic and digital revenue.

Title tags are one of the most important facets of SEO. Title tags are the titles of web pages that display in search engine results pages (SERPs) and as the clickable headline for a given result. They are the most obvious element in a search result and are pulled to the forefront of SERPs (Search Engine Result Pages). They display as below:

via BecomeGeek.com

Social networks use title tags to determine what to display in the link preview when you share a page:

Via Search Engine Watch

Title tags are extremely important for SEO, social sharing, and UX. They are one of the major on-page SEO elements. Keywords in title tags will factor heavily into a web page’s rank in any keyword-based search query.

Below find some of the best practices for crafting the perfect title tag.

KEYWORD EFFECTIVELY: Since title tags have a direct affect on SEO, effective keywording is crucial. Putting important keywords in the front of the title tag will increase SEO rankings, while keywords and search phrases at the end of the title tag will be less of a factor. For this very reason, it is best to put a company or website name at the end of the title tag, unless that name is an important keyword phrase. Keyword stuffing, or overloading keywords without making sense, will result in penalization. Ultimately, keywording effectively means writing clearly to an intended audience while factoring in important search phrases.

OPTIMIZING LENGTH: Title tags are not measured by length, but by a 600-pixel limit. Pixels do not equate to characters since certain letters require more pixels to compose than others. 600 pixels generally equate to about 50-60 characters. Measuring pixels can be made easy with this pixel length measurement tool by Search Wilderness.

RESEARCH, RESEARCH, RESEARCH: Statistics show 48% of marketers worldwide identified keyword/phrase research as the most effective SEO tactic. Effective research means honing in on your audience and enacting relevant keyword searches to observe the organic search competition. It is also important to note the inorganic competition: promoted ads for web pages that are boosted to the top of searches by Google AdWords.

Having a solid understanding of what a web page is up against in search engines helps web developers optimize their pages to stand out in the face of the competition. Since the competition and search rankings are constantly changing, research is an ongoing process. 34% of marketers cite frequent website updates as a key to their success.

PIPES “|”: Pipes can be used to punctuate and divide sentiments while minimizing punctuation and word count. See below for an example:

As with any copywriting, writing for an audience is crucial. Since the Title Tag is often the first thing a search user will see about your website, it is ultimately very important that it clearly communicates the subject of the web page and entices the intended searcher. Effective title tags are the first step on the way to SEO dominance.

Stay tuned for next time when we explore how to write an effective meta description!

Mobile Website or Mobile App: What Should I Build?

Android Development, iOS Development, Web Design, , , , , , , , , , , , , , , , ,

Mobile commerce will reach approximately $142 billion in 2016 according to Mobile Commerce Daily. Promoting business through mobile platforms has become an essential part of many IT and marketing departments worldwide. Mobile phones allow businesses the opportunity to share information about their store, such as hours and nearest location, as well as offer exclusive deals through branded apps as well as third-party apps like Yelp & GroupOn.

The necessity of a mobile presence is evident. When developing for the mobile platform, one has the choice between building a mobile website or a mobile app as the avenue of preference. Obviously developing for both platforms is ideal, but it’s important to realize the strengths of each platform when developing a mobile strategy. Many businesses don’t take into account the importance of the mobile web when it comes to driving revenue.

If you read Cashing Out the Smartphone, you know that while 85% of time spent on mobile devices occurs in apps, 80% of that time is spent on the user’s top 3 apps, a web browser often being one of them. 82% of smartphone users reference their phones when deciding what to buy. When it comes to eCommerce, mobile websites drive twice as much traffic as mobile apps.

Thus, while mobile apps are more expansive, mobile websites are in many ways more important to retailers. Utilizing both in tandem and playing to each platform’s strengths will maximize mobile presence to bring in revenue. Here are the top factors to weigh when deciding between building a mobile website or a mobile app:

DISCOVERABILITY

Due to the omniscience of Google, mobile websites are much more discoverable than mobile apps. Although it is good to have a presence in the app stores, it’s often more important to be discoverable on the web since the web is where the majority of customers go to find information. Mobile websites share a common publication format, making them almost universally accessible across smart devices. As we detailed in our article on Responsive Design & SEO, optimizing a website for mobile is not only a vital SEO practice, it also lowers the price of keywords in Google Adwords.

IMMEDIACY

The immediacy of mobile websites make them an asset to companies looking to disperse information about their products. Mobile websites can be found from any smart device with a single Google search. Mobile websites are quick, easy to find, and direct to the point. Mobile apps, on the other hand, require the user to go to the app store, search, download the app, then often sign up for an account. The distance between initial engagement and action/conversion depletes the chances of a mobile app acquiring new customers without a clever strategy, while mobile websites are more likely to pique new customer interests.

Many retailers have turned to mobile apps to manage loyalty points and increase customer retention through exclusive discounts.

Here are some popular third-party apps for increasing customer loyalty:

Shopkick: Shopkick offers customers rewards the moment they walk into a store. It is the most-used US shopping app connecting shoppers to retailers.

Belly: Belly is a digital loyalty rewards program which serves over 12,000 businesses and has more than 6 million members across the US.

COMPLEXITY

While mobile websites are great for dispersing information, apps typically can do much more. Native apps are designed specifically for a device and OS, thus ensures maximum performance. With mobile commerce on the rise, apps can help make the check-out process seamless. The process of approval required by the app stores assures users that any given mobile apps will be safe and secure. The complexity of mobile apps also makes maintenance more expensive.

Mobile websites are easier and less-expensive to maintain since they have a common code across platforms. Developers can release and update without worrying about being approved by the app marketplace. Mobile websites can only utilize a limited scope of a given mobile device’s features, although mobile browsers are in the process of getting more powerful and enabling more power over the device.

COST

Mobile websites are less expensive to develop and maintain since they use common code across devices. While cross-platform app development tools ensure a cheaper way to make an app usable across Android, iOS, and other operating systems and devices, they also can dilute the functionality.

In our opinion, it’s often better to start with a mobile website which disperses necessary information and calls attention to the business before creating a mobile app to supplement with additional functionality.

Any given business or organization has unique needs which must be attended to when establishing a mobile presence. Experienced web and app developers should ask the questions which get to the root of what is needed and can design creative solutions which maximize functionality for any given platform in accordance with the project budget. Be it through a mobile website or a mobile app, the mobile platform allows for any number of possibilities which can make any business more efficient, attractive, and profitable.

Rise to the Top of Google SEO with Responsive Design

Android Development, iOS Development, Web Design, , , , , , , , , , , , , ,

When designing a website, web developers have both practical and aesthetic concerns. From a practical standpoint, a website must reach and connect with its core audience. Due to the rise of mobile technology, it’s important for a site to have mobile functionality so that it can reach the multitudes surfing the web on their mobile devices. The most efficient, cost-effective & effective way is to develop a responsive website. Responsive design not only helps reach a mobile audience, it also increases overall SEO so that the website will rank higher in search engines.

For those unfamiliar with responsive design, check out this quick 60-second review:

When it comes to SEO, Google is king. As of October 2015, studies show the massive tech titan owns about 63.9% of the search engine market share. In February 2015, Google announced they will be emphasizing mobile-friendly search results. In their own words: “Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal.”

In accordance with their announcement, Google Adwords charges less for a keyword when the landing page is optimized for mobile. Responsive websites represent a major incentive for advertising on Google since responsive design guarantees presentation will accommodate the device regardless of whether it’s a mobile device or a computer.

Responsively designed sites offer a common landing page for all devices, consolidating the amount of links and improving the SEO. If a desktop or laptop user iMessages the link to an iPhone, they can click on it and immediately prompt the same web page rather than a different page optimized for mobile. Instead of duplicating content with separate sites for mobile and desktop mediums, responsive design ensures brand and information continuity with a singular master site.

According to Sociomantic, over half of online shoppers use more than one device. A responsive website not only ensures a consistent UI and brand experience, it eliminates maintenance cost by reducing the amount of websites one is required to maintain. The better a site is, the lower the bounce rate is, and the higher it will rank in Google. For businesses looking to succeed, responsive is almost always the best form of web design.

Mystic Media is a web design and application development company based in Salt Lake City, Utah and specializes in responsive design. For more information, click here or contact us by phone at 801.994.6815.

Facebook Champions Material Design: Why You Should Too

Android Development, iOS Development, Web Design, , , , , , , , , , , , ,

In the past year, material design has been rising in prominence as both an app and a web design aesthetic. As we’ve detailed in our past article How Material Design Redefined Android App Aesthetics, Material Design has the potential to catch on in a major way.  In this post, we take a look at the bright future ahead for the platform.

Facebook recently began testing a Material Design overhaul of their Android app. Additions include a floating action button commonly found on Lollipop apps. The design on the whole has a more cohesive digital world adhering to Material Design principals.

“Not only does the app look better, but it’s also going to make the app easier to use for Lollipop users who are now becoming accustomed to that floating action button.” Writes Killian Bell of Techno Buffalo.

Check out this picture of the Beta app (via Techno Buffalo)

Material Design Facebook

If Facebook’s Material Design app looks slick. If it proves to be functionally efficient, it’s reasonable to assume they could utilize some of the same design techniques to update their iOS app.

Facebook’s Android app redesign is reminiscent of the Gmail Inbox app. Considered one of the premier Material Design apps on the market, Inbox was developed by Google and provides a perfect showcase for Material Design aesthetics. Depth plays a major role in all the gestures. When the user swipes an email to mark it done, it reveals a green checkmark underneath the top layer as the email disappears off screen.

Check out his awesome promo video by Google which explains how Inbox works:

Inbox was created to manage mass volumes of emails. Larry Dignan over at ZDNet reviewed Inbox by forwarding his 700 or so work emails per day to the app to see how it handled organizing bulk emails. Inbox passed the test, allowing the user to create bundles of emails in order to better organize incoming messages.

With futurists predicting the downfall of email, the question becomes: Could the same Material Design techniques which the Inbox app uses to organize bulk emails and save screen space be applied to an encompassing Facebook social feed which replaces email?

The main problem inhibiting Material Design from catching on in a major way for the Android platform is device fragmentation. As of March, only 3.3% of Android devices are running the latest OS: Lollipop. 40% of Android devices are running KitKat and 20% are still using Jelly Bean.

Despite the obstacle of device fragmentation, as the next Android OS is released, Lollipop and Material Design are sure to become more and more prevalent. What makes Material Design so crucial is its role in connecting the Android device ecosystem. With more and more devices coming into the fray, Apple has been doing their part to push for Device Continuity, allowing for seamless transition between devices. Android may have to battle to overcome device fragmentation, but as Material Design gains momentum, their hardware and software will at least have aesthetic continuity.

The future of Material Design extends beyond the smartphone and the tablet. With the wearable revolution impending upon Apple Watch’s April 24th release date, it’s reasonable to assume Material Design will find outlets beyond traditional mobile devices as Android increases it’s wearable repertoire. If Google Glass had lasted, no doubt it would have utilized Material Design in its updates. Regardless, Android has several products in the pipeline that are sure to boast Material Design, including Android TV and Android Auto.

For now, Material Design is an Android-exclusive technique still vying for mainstream adoption. However, Facebook’s adoption of the design technique for their upcoming Android app is a good sign. As we look to a device-interconnected world, it seems inevitable the principles of Material Design will continue to evolve and shape the future of Android design aesthetics, and potentially expand to influence web and iOS aesthetics as well.

At Mystic Media, we’re constantly engaged in various app design projects. Our expertise reaches across all facets of the industry, be it iOS design, Android design, web design, strategic marketing and more. Contact us today by clicking here or by phone at 801.994.6815

5 Trendy Web Design Techniques to Modernize Your Website

Web Design, , , , , , , , , , , , , , , , , , , , ,

In the age of digital commerce, it’s vital to have a spiffy website. Even if a business does sell its products online, the first impression customers have of a brand often stems from the website. A messy website brings to mind a messy product. In this post, we will examine how 2015’s upcoming web design trends present ways in which to improve websites to make them look modern.

1.    Nail Your Landing Page

The landing page is the first impression a visitor has of a website, thus it’s a great opportunity to dazzle the viewer. Many websites have landing pages which are not only physically big, with imagery and design taking up most of the screen, but also large in metaphorical scale. Check out the website of Born Group, a creative media company with an extremely ambitious landing page.

Born sells something intangible—creative services. Their product is the ability to provoke emotion. As a creative agency, it’s vital for them to establish that they produce emotionally riveting content. The image of the ape is not only beautifully photographed, it’s powerful. If a prospective customer were on the verge of hiring Born Group, they would indubitably be swayed in the right direction from the moment they hit the landing page.

2.    Video Rules

For some companies, going for a message as big as Born would come off as overly self-involved. Born has an intangible product and sells B2B (Business-to-Business). They need to sell an idea and if they bring in a single project, it will pay for a big-budget investment in their site.

For smaller companies with tangible products, it’s important to put the product itself front-and-center. One way of doing this is to embed a video on the landing page of your site. For example, check out the salivating video on the landing page of Dunwell Donuts, a vegan Brooklyn donut shop.

The video succeeds on nearly every level. It makes the viewer crave donuts, artfully portrays the product, and tells the story of the founders of the business in an extremely intimate manner.

3.    Tell Your Story

The primary accomplishment of the Dunwell video is in the arena of storytelling. The Dunwell video tells the story of the company brand in an intimate way. By the end of the video, the viewer feels like they have a good sense of who runs Dunwell Donuts and what donuts mean to them.

A video is a cost-effective way of telling the personal story of a brand. Storytelling is a powerful medium because it creates an emotional connection between the viewer and the subject when executed effectively. For a business (especially a small business), this translates directly to brand loyalty. We’ve detailed other ways in which one can tell the personal story of a brand in our Parallax Scrolling article.

4.    Flat Design

Minimal web design is in. Apple’s design technique, flat design, is defined as “a style of interface design which removes any stylistic choices that give the illusion of three-dimensions (such as drop shadows, gradients, textures, or other tools that add depth) and is focused on a minimalist use of simple elements, typography and flat colors.”

Flat design is visually sleek and virtually inexpensive way of displaying one’s brand in a modern way. Check out some of the best flat design websites on the internet here.

5.    KISS (Keep It Simple Stupid)

A really well-designed landing page with minimal content looks much better than a lot of redundant, visually lacking pages. For an alternate approach to the donut vertical, check out the site for Elsie’s Donut Shop. It’s flat, minimal, sleek and to the point, stressing the products.

With the internet working more and more as a gatekeeper for customers to select which businesses they choose to solicit, modern aesthetics have a direct impact on business. Equipping a business with a sleek, modernized website puts them in the best position to excel in the marketplace.

Mystic Media is a web design and application development company based in Salt Lake City, Utah. For more information, click here or contact us by phone at 801.994.6815.

Parallax Scrolling: How the Latest Cutting Edge Web Design Can Increase Business

Web Design, , , , , , , , , , , , , , , , , ,

Web design trends are constantly changing. The latest and greatest today is Parallax Scrolling.

Parallax Scrolling websites are generally large one-page sites. As one scrolls down, the background images move by the camera slower than the foreground images, creating the illusion of depth. Oftentimes different animations are launched during the course of scrolling which generally cover different topics. It’s like having multiple pages in one stream-of-consciousness scroll.

Here’s a basic example of a Parallax Scrolling website.

There are many benefits to Parallax Scrolling websites. For one, they are aesthetically pleasing. The user experience is no doubt greater than any other common form of web design. Instead of forcing the user to explore the site, they need only scroll down to take in the information at the pace the web designers desire.  When creating a website for a single product, Parallax Scrolling sites can be very useful because they allow the designer to show off all the different features of the product without having to create separate pages.

Here’s a great example of a parallax website utilized to display all the different angles and functions of a single product.

Parallax Scrolling also allows the web designer to create a story and control the way in which the user experiences the narrative. Parallax Scrolling gives the designer unparalleled control over the pace at which the user takes in information. Again, the user only has to scroll down, they are much more likely to see the animations created by scrolling down than to have to click around different pages and explore to find information.

Check out this awesome example of how to tell the story of your brand through a Parallax Scrolling website.

Parallax Scrolling can also have a positive effect on Search Engine Optimization. Having a one-page-site means a reduced the bounce rate, the number of visitors who move to another page without exploring, which is beneficial for SEO.

Another benefit is the increased mobile and tablet user experience. Traditional websites involve several pages which all need to be customized for mobile and tablet devices. The time it takes to redirect on a mobile or tablet device can be tedious. Parallax Scrolling utilizes one-page, reducing the redirection time for smartphone and tablet users. If created with responsive HTML (Check out our post Responsive Web Design Is the New Web Design), you’re guaranteed good mobile and tablet user experience, so long as the user’s device isn’t outdated.

Due to the emphasis on cool, crisp visual presentation, Parallax Scrolling sites are more likely to attract social sharing, and thus will attract greater traffic. If the design is crisp enough, a parallax scrolling site could land itself on one of these best of lists.

Parallax Scrolling websites are generally created using HTML5 and CSS3. Although they are high-tech, they also come with their share of cons. For one, due to the heavy use of animations, Parallax Scrolling sites can take longer to load. They also may not function smoothly across all web browsers. Because the designer is in control of the pace of the scrolling, it can also be frustrating to users who want to consume information faster, or confounding to less tech-saavy users who are confused by the set-up.

Overall, Parallax Scrolling is the most visually-pleasing, high-tech aesthetic one can choose for their website. Although it’s pricey and complicated to create, it’s the most dynamic form of web design used today, and, when designed effectively, the most engaging way to lure traffic to a web page.

Mystic Media is a web design and application development company based in Salt Lake City, Utah. For more information, click here or contact us by phone at 801.994.6815.

How Material Design Redefined Android App Aesthetics

Android Development, iOS Development, Web Design, , , , , , , , , , , , , , , ,

In the ongoing war of the operating systems, the front-runners are undeniably iOS and Android. As we detailed in our Android L Vs. iOS 8 article, Apple took the latest battle; however, Android Lollipop represents a major step forward for the platform as it introduced the aesthetic concept of Material Design. We’ve covered the principles of flat design in Impervious Appeal: How to Design Jaw-Dropping iOS Apps, but we’ve never gone in-depth on Material Design because it’s fairly complicated. In this article, we’ll detail what Material Design is and why it represents a huge step forward for app design aesthetics.

What is Material Design? It defies a simple explanation. It is similar to flat design in that it emphasizes negative space, bright color schemes, and an emphasis on intuitive UI. Material Design differs from flat design in the way in which it evolves the concept.

Material Design takes the visual aesthetic of flat design and asks the developer to create a realistic digital world with physical rules within the UI. Material Design offers designers the help of two skeuomorphic concepts: depth and shadow.

Depth and shadow both play a big part in how the user interprets what’s clickable and what’s not. The buttons themselves interact with the touch. The whole concept plays off our ability as humans to recognize depth and perceive information hierarchies organized in the dimension of depth.

Below is a great video featuring Material Design in practice.

UI designers love Material Design because the addition of depth and shadow gives them more tools to convey purpose, meaning and order. It effectively evolves the concept of flat design. Grace LaRosa, senior experience designer at R/GA, said to VentureBeat:

“What’s newest and most of note, in my opinion, is how well documented and systematic the language is. After a long era of designers and developers creating Android experiences that often feel renegade or pieced together, Google have undoubtedly stepped up their efforts to standardize and improve the UI and UX across their app ecosystem.”

The problem with Material Design lies not to its aesthetic concepts, but the practicality of executing it within the Android platform. Android allows third-party companies to create hardware based in the OS, which creates device fragmentation. Not all Android devices run on the latest OS (Lollipop), in fact, some devices go back as far as four previous versions of the Android OS. Due to this vast discontinuity in Android devices, the adoption of material design will likely be a gradual, unlike the nearly instantaneous switch to the latest OS and OS aesthetics for iOS users.

As Grace LaRosa said above, Material Design does set-up a standardized UI/UX for Android developers to use across the app ecosystem, which will hopefully bring about more unity on the platform. Material Design is thus only a part of the solution to the problem which will ultimately limit its impact. It is designed to make for more consistent UI/UX across Android apps, but it won’t be adopted uniformly and thus won’t  single-handedly be able to transcend the device inconsistency in order to solve the unity problem.

Jon Wiley, one of the creators of Material Design, recently said in an AMA:

“I think a big challenge with Google Search in terms of experience is that it has often felt like a series of jump cuts in what is actually continuous. Material design gives us a framework we can use to do something closer to a scene change in a play, continuously moving from one state to the next. This can make it feel much faster and can also provide cues as to what happened when you touched something in the UI. It’s another step towards removing any speed bumps along the way to getting a good answer.”

Interesting to note that both iOS and Android seem to be striving for a more fluid sense of continuity in improving their platforms. For iOS, it’s functional device continuity, for Android, it’s aesthetic UX continuity.

Ultimately, it seems likely Apple will leapfrog past Android by building upon (or conforming to) the Material Design aesthetics in an upcoming iOS, which will then receive mass adoption as is the precedent with Apple OS’s.

For more information on Material Design, check out these awesome, in-depth videos from Google I/O 2014: Material Witness: How Android Material Applications Work and Material Design in Google Play.

At Mystic Media, we’re constantly engaged in various app design projects. Our expertise reaches across all facets of the industry, be it iOS design, Android design, web design, strategic marketing and more. Contact us today by clicking here or by phone at 801.994.6815