Tag Archives: website

Designing The Perfect Slider




 


 

When we think about a slider, we usually imagine an image gallery slider, or the infamous carousel, or perhaps off-canvas navigation, with the overlay sliding in from the side. However, this article is not about those kinds of sliders. Instead, we’ll look into the fine details of designing better slider controls for selecting a value or a range of values. Think of price range sliders, 360-degree-view sliders, timeline sliders, health insurance quote calculators, or build-your-own-mobile-plan features.


A playful animation of a slider, changing the appearance of a house.

In all of these use cases, a slider is helpful because it allows users to explore a wide range of options quickly. For precise input, a slider can never beat a regular input field, but we can use a slider to nudge our customers to explore available options and, hence, aid them in making an informed decision.


After a close look at perfect accordions and date and time pickers, let’s turn our attention to sliders, with do’s and don’ts and things to keep in mind when designing one. But first, we need to figure out when a slider makes sense in the first place. (Please note: that article is quite large, and contains many animations and videos.)

The post Designing The Perfect Slider appeared first on Smashing Magazine.


Source: Smashing Magazine

The Benefits of Continued Learning as a Designer

Learning as a designer can mean a variety of things: from strengthening technical skills, to trading workflow tips from fellow designers, to staying up to date on industry direction and topics on the mind of the design community from online communities. 

It is crucial to continue learning, even beyond the traditional structure of a classroom, and develop a habit of lifelong learning. The natural inertia of change in a workplace, and isolation from the larger landscape of the design industry can force a designer to gradually learn toward developing expertise in one area.

“T-Shaped” Designers

IDEO, or more specifically Tim Brown, formulated the concept of a “T-shaped” designer: mastery of a few design skill sets and a breadth of general skills, which “provided empathy for other disciplines and, in turn, fostered greater collaboration.” 

It is worthwhile and ultimately increases empathy when a designer develops a breadth of skills, as this can offer more perspective throughout the process of problem solving.

For example, development experience can help a designer become more empathetic to technical constraints and implementation realities that they otherwise would be less receptive to without that background. 

t-shaped designer
Depth of knowledge in a single field, accompanied by breadth of knowledge in related areas

While it may seem that taking time away from specialization would be the trade off for developing a breadth of skills, the reality of design in the workplace is one that involves collaboration among many different stakeholders and people from various specialties. 

Having skills that increase understanding are particularly useful in a team environment–and any team that operates in a silo will end up having more issues with miscommunication and misunderstanding. 

Ultimately, its beneficial having periodic refreshers throughout your working life as a designer. Try attending design conferences, engaging in the online or in-person communities for design (AIGA, IXDA as a few examples) in order to understand how the design industry is changing and where it may be moving next. 

Learn More!

As Jonathan Cutrell rightly states:

“Lifelong learning and pursuit of knowledge is an endeavour that is always worth pursuing” – Lifelong Education is for Everyone

See what other skills you can learn with a Tuts+ subscription.


Source: Webdesign Tuts+

FullStory Lets You See Your Site from a User’s Perspective

Imagine being able to see your website as a user does. You might catch their frustration when something doesn’t work as expected. Or, you may give yourself a high-five when seeing a transaction go just as you hoped.

Even if you aren’t sitting right next to each and every user, you can still see exactly how they interact with your website. FullStory makes it happen.

FullStory - The Service that Beats Traditional User Testing

The Service that Beats Traditional User Testing

With FullStory, you can replay user sessions with pixel-perfect accuracy. You’ll see every click, key press and page transition along the way. Even better is that each session is a fully-inspectable recreation of your website – with DOM, the JS console, and assets. So, for example, when a JavaScript error pops up during a user session, you’ll see it. A detailed log of every JS error from a user’s browser is provided.

Unlike traditional user testing, FullStory is a complete solution with incredible detail. With the FullStory TV feature, you can choose to auto-play every user session or just a saved segment. You’ll gain non-stop insight into how users interact with your site. As you watch, patterns will emerge like rage, error and dead clicks. From there, you can determine what is and isn’t working much more quickly than with old school testing methods.

FullStory has Powerful Features to Analyze Data

Powerful Features to Analyze Data

While it’s great to have access to tons of session playbacks, you also need a way to quickly find the interactions you’re looking for. FullStory’s OmniSearch makes it easy. Find customers, view page analytics, create funnels and more. All you need to do is start typing – OmniSearch does all of the heavy lifting.

To visualize results, FullStory provides Searchies. Valuable data comes in digestible pieces like pie charts and funnels that automatically accompany every search and segment. It can help you to make sense of all that session data.

FullStory also integrates with a number of popular third-party applications. Session data can be sent to collaboration apps like HipChat, Slack or Trello. It also works with support suites like Desk.com, HelpScout and Zendesk. You can bring insights directly into your BigCommerce, Shopify, Squarespace or WordPress/WooCommerce website. Plus, you’ll get the benefits of hooking into Google Analytics Universal and Google Tag Manager. There are a number of useful integrations available to meet your needs.

Team members will love FullStory’s collaboration-friendliness. You can send individual session playback links to people both inside and outside of your organization. This will help you collect valuable feedback and insight from others.

With the Identify API, you can bring customer information directly into FullStory. Customer data will be searchable within the app. Custom User Attributes let you populate unique user fields like a customer’s subscription level or their lifetime spend amount. Privacy is vital and FullStory makes it easy to exclude sensitive customer data through a simple point and click interface.

Sign Up for a Free FullStory Account

Sign Up for a Free FullStory Account

Do you really know how users interact with your website? Stop guessing and sign up for a free account with FullStory. See the valuable insights you’ve been missing. They’ll make for a better website, and you might even become the office superhero.

The post FullStory Lets You See Your Site from a User’s Perspective appeared first on Speckyboy Design Magazine.


Source: Speckyboy

Blogs vs. Online Magazines: Differences in Design and User Experience

You’re reading Blogs vs. Online Magazines: Differences in Design and User Experience, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Blogs vs. Online Magazines: Differences in Design and User Experience

The design world is abuzz with the rise of online magazines. But the vast majority of these sites run on blogging platforms like WordPress, and they operate almost exactly like traditional weblogs. So where does someone draw the line between a traditional blog and an online magazine? And if you’re thinking of launching a new blog/magazine […]



Source: Designmodo

How to Add an HTML5 Video Player with Lightbox in Adobe Muse

HTML5 Video Player with Lightbox Widget - Adobe Muse CC - Muse For You

How to Add an HTML5 Video Player with Lightbox in Adobe Muse. No Coding Skills Required.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

Video is becoming our main way of consuming information. It is most evident with YouTube as 300 hours of video are uploaded to YouTube every minute and almost 5 billion videos are watched on YouTube everyday! That is a staggering number, and it is no wonder I often get requests for video widgets.

YouTube makes it really easy to add video from YouTube to your website and Muse even has a built-in widget that allows you to do this, but what if you wanted to add your own video without going through YouTube?

That is where the HTML5 Video Player with Lightbox widget comes into play. With this widget you can upload your own mp4 video to your website without having to go through third party video hosting like YouTube or Vimeo. The video can be watched directly from your server. Not only that you can also open the video in a Lightbox display giving the user a more direct experience of watching the video without any information surrounding the video. Many users prefer hosting their own video as this means no ads or related videos at the end. The HTML5 Video Player with Lightbox also comes with a YouTube player in case you wanted to add YouTube video as well.

Here are the steps to adding the HTML5 Video Player with Lightbox to your Adobe Muse website:

1. Double click the .mulib file to install.

2. Drag and drop an “Add First” widget from the Library Panel and place at the top of your Adobe Muse website. If you do not see the Library Panel go to Window > Library.

You can choose from the following “Add First” widgets:

– HTML5 Video Player – Add First – For Video Players.

– HTML5 Video Player – Add First – With Lightbox – For Video Players and Video Players within a Lightbox. You can add a color with an opacity or an image for the Lightbox background.

– HTML5 Video Player – Add First – With Gradient Lightbox – For Video Player and Video Players within a Lightbox. You can add a gradient with 2 colors for the Lightbox background.

3. Place a video player widget onto your website. You can choose from the following video player widgets:

– HTML5 Video Player Widget

– HTML5 Video Player Widget – Lightbox

– YouTube Video Player Widget

– YouTube Video Player Widget – Lightbox

The Lightbox widgets open the video within a Lightbox. Depending on the “Add First” widget added you can set the Lightbox background to be a color, image, or gradient. You can set the opacity of the color and image with the Lightbox background.

HTML5 Video Player with Lightbox Widget - Adobe Muse CC - Muse For You

4. For the HTML5 Video Players it is recommended to add at least a .mp4 file for video. You can add a .webm and .ogv file for fallback support on browsers that do not support .mp4. Most browsers support .mp4.

5. Add a poster image so when the video is not playing an image will show, and then the user can press the play button.

6. Set the theme of the video player to default, dark, or light.

7. You can set the width and height of the video within the widget options. There is a 16:9 Aspect Ratio calculator within the widget. You can also set the video to autoplay, loop, and the initial volume. You can set the video to overscale within the Lightbox, meaning the video will get larger then the size set within the widget when the browser is resized.

8. Done!

 

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

Read More at How to Add an HTML5 Video Player with Lightbox in Adobe Muse


Source: Web Design Ledger

Is a 4-Hour Workday Your Dream? Get To It With 260+ Pre-Built Websites

You might think that you have the needed skills to get by financially on a 4-hour workday.  Yet, it can be challenging to figure out how to get started down that path. As it is at the moment, even 8-hour workdays aren’t always enough to meet your deadlines. Also, keeping you clients happy and satisfied is another concern.

Most likely, it’s neither your skills nor your talent that’s the problem. It’s the approach you take to your work or the tools you’re using, that keep you shackled to a standard 8-hour workday.

It’s easier to make the switch than you might think.

  1. Be Theme Can Remove 4 Hours from Your Schedule in 1 Second Flat

Be Theme is one of Themeforest’s top selling WordPress themes. With this theme, you’ll be surprised at how much you can accomplish in 4 hours.

How about building a website from scratch and delivering it, for example? The secret lies in having ready access to over 260 pre-built websites. You can install any one of them with a single click; then customize it to meet your client’s needs. This cool 40-second video demonstrates how easy it is to get a 4-hour work session underway.

With Be Theme, you won’t waste time looking for the perfect match for a client’s niche. You will be able to customize the content of a pre-built website in a breeze.

  1. 10 Most-Common Types of Clients You’ll Win Over with Be Theme

For Clients That Sell Online Courses: Be eLearning

Building an eLearning website need not be challenging. This responsive and easy-to-customize pre-built website guarantees you’ll give your clients exactly what they want and need – an e-learning platform that will entice customers to keep coming back for more.

For Small Businesses Owners: Be Craftbeer

Be Craftbeer has all the ingredients to get your website design and development off to a great start for a client selling handcrafted products. This pre-built website, with its cool JavaScript effects and large images will, in fact, serve you well when you need to build a website for almost any small business.

For Interior Design & Architecture Industry Clients:  Be Tiles

You may not fully understand an interior architect/designer’s business model, but delivering a website based on Be Tiles will make you look like an expert on the subject. Be Tiles’ high-quality images and design elements provide the base you need to make any product stand out.

For Those in the Creative Industries: Be Artist

Innovation is the watchword for clients representing this niche, and their tastes and standards can often be difficult to accommodate. Be Artist, with its JavaScript portfolio filtering and parallax scrolling, makes meeting these standards and the need for an innovative approach a piece of cake.

For Clients Working in the Catering Industry:  Be Burger

Don’t just settle for a “great” catering service website design. Build one for your client that stands out from the crowd. After all, that’s what they are counting on you to do. Large, good-enough-to-eat images, and Be Burger’s easy order forms will do the trick.

For Clients in the Health and Fitness Industries: Be Sports Club

Health, fitness, and sports clubs keep growing in popularity, but you wouldn’t know it by looking at most of the websites. With the Be Sports Club pre-built website to get your web design underway, you’ll have clients in this popular niche lining up for your services.

For Your Travel and Lodging Industry Clientele: Be Hotel2

High-end hotels and resorts will pay well for the website services they need. You needn’t be afraid of charging a premium price when you can install a pre-built website like this one, customize it to fit your client’s needs, and delivered an awesome product within a few hours.

For Owners of a Restaurant or Bistro: Be Restaurant

Be Restaurant provides a design concept you can take and run with if you truly want to wow your client(s) with a website unlike anything the competition has to offer. It was designed to meet the needs of a Michelin-rated restaurant, a restaurant you’ll likely find at a destination resort or the quaint bistro around the corner.

For Your IT Clients: Be VPN

IT clients expect you to be serious and innovative in your design approach and provide them with a website that’s well-structured and highly professional in appearance. With Be VPN as a starting point, it’s easy to do. Adding a human touch or two to the design won’t hurt any either.

For Your Clients Who Sell Luxury Cars: Be Car

A luxury car dealership deserves an elegant and engaging website the matches its high-end products. Be Car, with its stunning hero image and astute use of white space, does precisely that. Customizing Be Car to include the dealer’s information should take you 4 hours max.

  1. So, What’s Keeping You Away from Your Dream?

Is it a bad case of procrastination that’s keeping you away from your 4-hour working day dream? Or is it a fear of change, and a reluctance to leave your comfort zone; which really isn’t all that comfortable, is it? Also, there’s a fear that by working less, you’ll automatically earn less.

Ask yourself this. Would you like to know the way of finishing a project that would normally take a day or two of your time in a couple of hours?

Look no further than Be Theme. Explore in detail one or more of the ten examples you’ve just seen. You will discover that much or the up-front design and development work has already been done for you! This will save you a ton of time that you can reserve for the beach!

Conclusion

Right now, it is the best time possible to take the leap. It’s not a leap into the unknown either. You’ll know right away what you’ve gotten into, and you’ll like what you see. Turning out a website from scratch in 4 hours may have seemed like a pipe dream up until now.

Just select the pre-built website and have the content and images at hand to start customizing it. Next thing, you will discover your newfound ability to deliver the high-quality website! You client will get the desired material in no time, and you can take the afternoon off!

Read More at Is a 4-Hour Workday Your Dream? Get To It With 260+ Pre-Built Websites


Source: Web Design Ledger

Learn How to Create a Prototype in Atomic

Prototyping should be a fast and easy way to gain confidence in your designs. No longer regarded purely as a way to sprinkle motion magic or over-polish designs, prototyping is a communication tool. Whether communicating with stakeholders, design managers or users, a good prototype helps to communicate design decisions and test ideas.

Our Prototype

In this tutorial we’ll be creating a basic “boarding pass” prototype in Atomic, which you can preview here. The prototype begins with a loading state before enabling you to browse your upcoming flights and preview your boarding QR code. To create this prototype we’ll be using interactive components, data, variables and page transitions. Not to worry! I’ll be helping you through each step.

Here’s a demo of what we’ll create:

Tutorial Assets

There are a few things you’ll need in order to follow along:

  1. An Atomic account: Get started with a free trial (there’s also a free plan).
  2. Design Assets: This is the file in which you’ll find the design assets and create your prototype.
  3. Data Source: A Google Sheet file with the data we’ll be using in our prototype.
  4. Atomic iOS App: Download the app from the App Store to test your prototype on your phone.
httpsatomicio
atomic.io

If at any time throughout the tutorial you have a question, feel free to reach out to me (@femkesvs), or the Atomic support team (@we_are_atomic) on Twitter.

Let’s go!

1. Copy the Assets to Your Account

I’ve created a sample file with the assets you’ll be needing to create your prototype. This sample file is complete with the assets we’ll be using, as well as pre-built components.

copygif

You can access the assets here. To use the assets you’ll need to copy the prototype into your account. You can do this by clicking Copy & Edit in the bottom right and then select a project you’d like to copy it into. I suggest creating a new project for this tutorial.

2. Upload the Data to Atomic

Before we get started creating our prototype we’ll need to first add the data source to Atomic. I’ve put together a Google Sheet with some basic data that we’ll be using in our prototype.

You can access the data here. With the data source open, head to File > Add to My Drive (you’ll need a Google Account for this).

Next, with your project open in Atomic, select the Data tab. From here click Import Data, and locate the data source via search. Once located select the data source. You’ll see Atomic load the data into your project. This data source can now be accessed and used in any prototype within the project.

We’re ready!

3. Creating the Loading State

Let’s begin assembling our prototype by creating the loading state. We’ll do this by creating both a custom transition and timed-based page action.

First, select the loading component from the Assets page to copy (CMD-C and paste (CMD-V) it to the page 1. It will be large, and rather than resizing it, position it into its starting position.

Then copy the loading element you just placed on page 1, this time pasting it on on page 2. Reposition it into its final state (rotated clockwise 75° so the plane is positioned off the right side of the canvas).

page-action-1gif

To create our transition, hop back to page 1. In the right hand properties panel you’ll see a section named Page Actions. Click the plus button and then set the following:

  • Make something happen: After a set time
  • Wait: 0
  • Go to: Page 2
  • Motion: Custom transition
  • Easing: Ease in-out
  • Duration: 2000

Let’s preview and see our transition in action–you should see the plane glide from left to right over the course of two seconds. Neat!

To take it further you can also copy and paste the Fly logo to both page 1 and page 2 (beneath the loading component in the pages panel and placed behind). Make sure you follow the same technique of placing it in its start and ending position on each page. You probably have to adjust the order of your layers to make it appear from behind.

Lastly we’ll need to create an action that takes the user automatically to page 3 from page 2. On page 2 add another timed page action. This time we’ll use the following settings:

  • Make something happen: After a set time
  • Wait: 1000
  • Go to: Home
  • Motion: Slide up
  • Easing: Ease in-out
  • Duration: 300

Tip: if you’d like to stagger the timing of the two elements animating you can do this using the Advanced Motion Timeline.

4. Understanding Components

Next, copy the elements needed for page 3 and paste them onto page 3. You’ll need to do a bit of rearranging and adjustments to fit the elements on the page as needed.

Almost all of the elements needed for this page are components.

A Word About Components

Components in Atomic are like symbols. Any component can be edited and reused throughout a project. Any edits made to a component will be updated in each instance. Components can also be interactive and contain multiple states of a symbol. This makes it really easy to structure your prototype.

Let’s add some interactivity to the boardingPasses component. To open the component, double-click on the component icon in the layers panel next to the layer name. Once open, you’ll see three pages; one representing each flight. For now these passes are identical, soon we’ll change this.

We know that the user has three flights and we’d like them to be able to swipe through each one. There’s also a QR code icon that, when interacted with, should bring up their boarding pass code.

If you look in the layers panel you’ll notice each page is an instance of a component called “boardingCard”. Let’s open the boardingCard component now to see how the data has been applied.

5. Using the Data

The boardingCard component is a component embedded in a component. This allows us to create a boarding card symbol that can be reused while showing different data sets.

With the boardingCard component open you’ll see two pages; the front and back of the pass. This is where the data is being assigned to the individual text elements.

Text Properties
Data inherited from parent

Select the ABC text and take a look at the Text properties. You’ll notice the following:

  • Content: Set from data column
  • Data: Inherit from parent
  • Column: departure-code

Subsequently if you look at the Google Sheet where this data is being pulled from, you’ll see a column titled “departure-code”. This means that the text element ABC will display whatever data is shown in the column “departure-code”.

All dynamic text in this component has been set to Inherit from parent. This allows us to link to the data sheet at a group level, and therefore display and sort through the data row by row. We’ll get to this soon.

6. Adding a Flip Interaction

Next we’ll set up a page-based transition to flip between the pass and QR code. On the front page of the boardingCard component press H to bring up the hotspot tool. Then, draw a hotspot over the QR code icon on the front page.

Hotspots allow you to define interactive areas of your prototype. With your hotspot selected, under the interactions panel set the following:

  • Gesture: Click or tap
  • Go to: > Next page
  • Motion: Flip
  • Easing: Ease in-out
  • Duration: 300MS

Then, on the back page, create another hotspot (H) that will take us back to the front page. This time draw it over the close icon and set the following:

  • Gesture: Click or tap
  • Go to: > Previous page
  • Motion: Flip
  • Easing: Ease in-out
  • Duration: 300MS

Time to test your interaction! In the bottom right corner, press the Preview button. Preview mode lets you test your transitions and interact with your prototype via hotspots. Try clicking on the QR card or close icon; the card should flip between the two states. You can close the preview by pressing X.

Having this boarding card as an interactive component allows us to select which data is shown dynamically, without having to create multiple states and interactions.

7. Connecting the Data to the Parent

To return, click the purple back button up at the top left. Now you should be back in the boardingPasses component. In this component we have three passes currently displaying the same data. Let’s update this now.

Remember how inside the boardingCard component, the data was set to Inherit from parent? In this case the parent is the component instance.

On the flight 1 page select the boardingCard instance. In the component properties leave State as it is. Under Data, select the data source and ensure the Row is set to row 1. The instance should now display data from the first row of the data sheet.

If you toggle the row you’ll notice that the data displayed updates. Let’s keep it on row 1 for now, however on flight 2 and flight 3 set this to show data from row 2 and row 3 respectively.

8. Adding Swipe Gestures

To enable users to swipe through their boarding passes we’ll need to set up some swipe interactions.

Create and draw a hotspot (H) on the right-hand side of the flight 1 page (make sure you leave some space at the top for the hotspot over the close icon on the back page of the boardingCard component, and that it doesn’t cover the QR code on the front page). To create the swipe gesture, use the following settings:

  • Gesture: Swipe left
  • Swipe distance: 200
  • Go to: > Next page
  • Motion: Push Left
  • Easing: Ease in-out
  • Duration: 300MS

Do the same on the the flight 2 page, and add a second hotspot on the left side of the flight 2 and flight 3 pages set to Push Right and Push Left instead. Feel free to press Preview to test and interact with the component, and adjust your swipe settings accordingly.

9. Create a Variable

To finish building the prototype we’ll need to create and use a variable. This variable will enable our components to talk to one another while influencing their state.

The variable we’ll be creating will be used to update the progress dots based on which boarding pass is shown.

To create a variable, press V to open the Variables Modal. In here click Create New Variable and type “flightDisplayed” into the Name field. Leave the default value blank.

Great, you have your variable set up! Close the variables modal by pressing the X or escape on your keyboard.

10. Using Variables

Navigate back to the prototype. If we preview now from the Home page, you should be able to swipe between the cards and also interact with the QR code.

While we can now swipe through the passes, there are a couple more things to configure to influence the progress dots to update based on the progression of boarding passes.

To do this, open up the boardingPasses component. On page 1 let’s create the following page action:

  • After a set time
  • Wait: 0
  • Set: flightDisplay (variable)
  • To: value…
  • Value: 1

Repeat this on page 2 and 3, ensuring the value is set to 2 or 3 to reflect the page you’re on.

We’ve effectively told the component boardingPass to update the value of the variable flightDisplayed, depending on the flight (page) displayed. We can now use this value to influence the state of the progress dots.

Here’s how: head back to the prototype and open the progressDots component.

You’ll notice three pages (states) named 1, 2 and 3. This naming matches the values being set in the flightDisplayed variable. It’s important that these page names match the values set.

Head back to the prototype, select the progressDots component, and:

  1. In the Component section in the properties panel, open the State dropdown.
  2. Select the flightDisplayed variable.

We’ve now connected the progressDots component to the variable flightDisplayed. This means that when the value of the variable changes to a value, the progressDots component will display the page that matches the variable value.

Try previewing your prototype now, interacting with the boarding passes by swiping and seeing if the progress dots update.

Lastly, you can delete or move the Assets page to ensure your shared preview opens on the correct starting page. To delete the page, select the hamburger menu on the page thumbnail and click delete page.

Tip: See if you can figure out how to get the promoCard component to update its state based on the flight displayed. You’ll want to create a new variable called cardDisplayed.

Ta-da!

There you have it! Your very own Boarding Pass app. If you downloaded the iOS App, try opening the prototype and interacting with it on your iPhone; it should feel just like the real thing.

Well done for following this tutorial through to the very end. You should now have a thorough understanding of how to create your own prototype in Atomic. If you have existing assets in Sketch you can import them using the Atomic Plugin for Sketch, or design natively in Atomic if you wish.

Questions? Comments? Leave them below or reach out to me on Twitter (@femkesvs).


Source: Webdesign Tuts+

6 Subtle UI Changes in iOS 11

With the unveiling of iOS 11, Apple continues to iterate on the existing user interface and push the envelope in terms of what can be achieved within a mobile operating system.

As with many of the previous iOS versions, the changes tend to be minor but are consistently improving the design one small aspect at a time. By stepping away from making dramatic updates, Apple can hone in on the minor details, and achieve a high level of perfection across an ecosystem spanning multiple devices dating back over four years.

In this article, we are going to look at six of these subtle user interface updates which look to build upon an already highly-polished design.

Expansion of Larger Bold Title Text

Expansion of Larger Bold Title Text
Image via MacWorld.co.uk

First introduced in iOS 10 via the Music app, Apple is rolling out its large, emphatic title type across multiple apps including the App Store, Podcasts, and Settings, just to name a few.

When first introduced, this was a relatively significant shift in design language, moving away from the smaller, centered text that was present since the inception of iOS.

iOS 11 simply looks to expand this design language to achieve a greater level of consistency across the system apps.

Signal Icons

Signal Icons
Image via MacWorld.co.uk

Another very subtle change is the shift away from circular network signal indicators in the status bar, to a more traditional bar system.

This makes sense, given Apple’s interpretation was exclusive to iOS and rarely seen anywhere else. The new design brings it in line to be similar to Android in form and is a more easily recognizable icon system to indicate signal strength.

The design is also more compact, opening up greater space for elements such as the ‘Back to’ functionality.

Simplification of Notification Cards (Removed Header)

Simplification of Notification Cards
Image via ios.gadgethacks.com

Apple has made a very simple update to notifications in the removal of the header background behind the app name and icon. This allows for a more cohesive feel and a simpler, more refined design language.

The change also reduces the notification height, allowing for more notifications to fit on the lock screen at any one point.

Control Center Icon Updates (Rounder Icons)

Control Center Icon Updates
Image via ios.gadgethacks.com

Apple has made some very minor tweaks to the control center icons, amongst others.

The design language has moved toward a more rounded feel, with icons such as calculator moving from harsh edges with no radius, to fully rounded shapes. Volume and flashlight icons have also been further simplified and refined.

Fully Rounded, Filled Buttons

Fully Rounded, Filled Buttons
Image via TouchArcade.com

Moving on from the slightly rounded, border-style buttons, Apple has now opted for fully rounded, fill-style buttons. In doing so, it brings them in line with the rounded design language now seen across the operating system.

It also allows for greater contrast in promoting the user to tap on the primary CTA. The previous border-style buttons were incredibly subtle and could often be glanced past without notice.

Dark Mode (Kind of)

iOS Dark Mode
Image via idownloadblog.com

It’s not quite a dark mode per se, but Apple has added a feature named ‘Smart Invert Colors,’ inverting app colors without affecting imagery or media.

While this is an accessibility feature, it certainly achieves some exciting user interface results such as in the settings app pictured above, and may evolve into something users can switch to through choice as the feature is further refined.

These are just a selection of the subtle user interface changes that Apple has introduced. Given iOS 11 is still in beta and not scheduled for full release until the Fall of this year, it will be exciting to see the designers at Apple refine the operating system even further before launch.

What do you think of the subtle user interface changes in iOS 11? Share your thoughts in the comments below!

The post 6 Subtle UI Changes in iOS 11 appeared first on Speckyboy Design Magazine.


Source: Speckyboy

Simbla, the Database Driven Website Builder

You’re reading Simbla, the Database Driven Website Builder, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Simbla, the Database Driven Website Builder

Simbla is a website builder launched back in 2013 by a team on enthusiasts and innovators. Built as a hassle-free solution for individuals and companies looking to establish an online presence and boost their businesses, Simbla impresses with elegance and functionality. In additional to building websites, Simbla also allows anyone to extend their website with database […]



Source: Designmodo

45 Catastrophic Failures in Graphic Design That Will Make You Laugh

As we all know, a visual design’s purpose, regardless if it’s logos designs, outdoor signage, ads design or website designs, their job is to give off the same energy you would want people to receive when you describe the company or the organization they represent.

That being said, it’s quite surprising that there are actually people that are willing, and more importantly, more daring to post a logo design in the price range of $100. Some of them even show enough disrespect to the creative community to low down the prices until $50/design. But the worst part of this story is not just the low prices some customers tend to set, but also the fact that many designers accept them. Beyond this, it looks like no one thinks it’s almost a fact that only graphic designs failures will come out of that venture.   

Somehow, I think the designers who take these shameful jobs can’t be fully blamed; quite frankly, I think they just don’t know any better or they didn’t look at the design from all perspectives. For the most part, the people accepting these disrespectful jobs are either young designers, at the beginning of their career or less skilled starving designers on their last money with no solid clients in sight. Or a person who knows to play a little bit with the design software and after getting no responses from other “so called designer” has decided to take the design work into his / her own hands and consider he/she did a very good job.         

Obvious, this treatment of graphic design will lead, without any doubt, to the inevitable lower graphic design standards set for this creative profession. With a key creative field being disregarded every day, a client base for this field with an “ignorance is a bliss” mindset, and plenty of people claiming falsely to be graphic designers, what is there for real professional creatives to do?

Well, maybe take a note from the satire TV shows and celebrate some of the greatest design failures. We spent so much time celebrating how good some designs can be, and appreciating the real skills and talent that are showcased there, and we forget talking about graphic design failures. And we can see a lot.

That’s why in this article, you will see an array of awful designs. Some of them will make you laugh, other of them will make you to ask yourself “What was in the designer’s mind?”

1. The Eat

Everyone likes to eat, but I think the designer of this cup is the only who knows it’s about a cat!

2. Website stock photo failure

Did you see The Invisible Man movie? This could be a new way for making him visible for others! Nothing else to add, just a note for the designers: always double or even triple check your stock photos!

3. ChURrch

 

I can’t figure out if it’s only de designer fault, but I think a proofreader is missing here!

4. Apprenticeships

 If you are looking for an apprentice, this doesn’t really mean anything. But if your target is a bunch of people looking for app rentals or ice ships or ice on ships, this design could have a sense.

5. Arlington Pediatric Center

I just checked their website and I saw they have changed their logo to something more appropriate for a medical center. It’s no longer a pedophilic center. But it seems they save something with crabs and bears. A new failure? Or just marketing strategy?  

6. Mont-Sat

 

No one should be jealous on his happiness :D. He’s just Mr. satellite!

7. Unfortunate reflection

Who wants this??? The best example for checking the end result before playing with reflection!

8. Zombie apocalypse

Do you imagine how could it be? Bad designs might just send us into the zombie apocalypse!  

9. Cannibalism of cats

As I remember, cannibalism is forbidden even in the cat community.

10. Kundawara Pharmacy

There’s no need explanation why Kundawara Pharmacy’s logo gained such widespread public attention.☺ We just wonder what services are offered behind of these doors.

11. Institute of Oriental Studies

The designer who created this logo thought it was the best representation for what the Oriental Studies mean ☺  

12. Mama’s baking

Maybe the designer’s intention was to start a fire down there? Ok, maybe in Greece, where this café is located, this doesn’t seem weird. Just maybe….

13. Maple Syrup

It seems no one noticed the suggestive nature of the sign for over a decade.

14. Mega Flicks

After reading this logo, many customers might think twice before entering into a MegaFlicks store.  Lesson to learn: chose fonts carefully.

15. Rape Nuts

Rape Nuts? Grape Huts? Rape Guts? I think the copy was doing well before the designer decided to get some style with letters.     

16. Super Bowl

Who needs an elbow, anyway? This happens when the designer doesn’t pay too much attention….

17. Don’t be happy

Good designs promote happiness and encourage you to set aside your worries. The bad designs do the exact opposite.

18. Poo

Everyone does it, but hopefully not on the table ☺

19. Chewable vitamins

Everyone wants healthy skin, hair and nails. But I don’t think anyone likes to chew them.

20. Therapist? Rapist?

Yeah, sure, “rapists” and “therapists” are the same thing….. Think and design again…. With a better font. Or at least a little bit more attention. This image reminds me a lot of a different “therapies” design fail. 

the rapist design fail.

21. Virtual Reality

I really don’t think it’s necessary to make VR technology more whimsical than it already is.

22. Bone Goal

I don’t think the whole team should share the same “bone” goal…

23. Yves Levesque

It looked ok in Photoshop, right? This happens when the car wraps are designed without making real simulations.

24. Factory Farts

No family can live with factory farts. But this headline is a huge mistake.

25. Lesson about bones

Definitely, this is not the lesson about bones you meant to be teaching.

26. You Are Alone

Pink on pink is really undercutting your message. Someone should learn about contrast in graphic design.

27. Wedding Invitation

Many people consider marriage being a prison. But I don’t think someone should be left hanging on their wedding day. ☺

28. Sauces or car clean products?

These sauces look like car clean products. I don’t think this is the vibe the designer wanted to be.

29. Fashion Fart

For sure, this wasn’t the intention of the designer, but still.. 

30. Unbelievable Transformation

When you work so hard, you change even the ethnicity…

31. Sasa Lele

I love Sasa Lele ☺!. Especially when it has 50% discount!

32. Buy 3, get 2

It seems this designer is also the best marketer in the world ☺))!  

33. Children’s Menu

Yes, I’ll take one Child Rib, please, along with a Child Burger! And for drink…….

34. Plastic Surgery

Maybe this women should start tell little white lies after her plastic surgery!

35. Exit poll

Apparently zero is a little bit less than 34, but it’s much bigger than 22 ☺. Someone should learn to make some infographics.

36. Men’s Boxer

Another example of unrealistic body expectation for men….

37. Love, Morriage, Bobby?

Who is Bobby? Does he know who will come up?

38. Ndeeisgihgbnocrehnotoedr

 

For sure, the designer’s intention was to be different, but, does anyone understand anything?

39. Doughboys

Maybe this restaurant offers pizza, salad and panini, but their logo says something else. I won’t mention what, yet it’s not too difficult to see for yourself.

40. Clinica Dental

Dental clinic or “full-service” practitioner? I think the patients of this clinic have already figured out ☺.

41. Year Of The Monkey

This poster was created for celebrating Year of the Monkey. But as humans, we have to ask: Which monkey?   

42.Junior Jazz Dance Classes

This happens when the designer doesn’t pay too much attention to the negative space. Wonder if it’s a junior dancer center or something else?

43. The computer doctor

Just wonder why and how. Just view the mouse from the logo and pass your own judgment.

44. Corona

Clearly, this man doesn’t have any arms. But… would he be the man of the future?

45. Bureau of Health Promotion Taiwan

When you’ve gone too far, I think it’s better to step back and take a closer look. Am I right?  

 

Read More at 45 Catastrophic Failures in Graphic Design That Will Make You Laugh


Source: Web Design Ledger