Speckyboy Design Magazine » UX http://speckyboy.com Web Design News, Resources & Inspiration Sun, 20 Apr 2014 18:20:38 +0000 en-US hourly 1 Exciting New Web Design Ideas Worth Taking a Look athttp://speckyboy.com/2014/02/19/exciting-new-web-design-ideas-worth-taking-look/ http://speckyboy.com/2014/02/19/exciting-new-web-design-ideas-worth-taking-look/#comments Wed, 19 Feb 2014 13:17:20 +0000 http://speckyboy.com/?p=46753

One thing we do at the start of every year is look back at some of the popular trends from last year and try to predict what will be the exciting new thing of the...


The post Exciting New Web Design Ideas Worth Taking a Look at appeared first on Speckyboy Design Magazine.

]]>


One thing we do at the start of every year is look back at some of the popular trends from last year and try to predict what will be the exciting new thing of the next. Following along from those lines, I recently took a look at some cool interesting web design elements and thought it would be a good idea to expand on that and to take look at a few more. So without further ado here are some epic new web design ideas that you guys might appreciate and maybe find some inspiration from.

1. Your words become your actions

Voice Control

Smartphones have made most of us comfortable with the idea of talking to our phone, but what if we could take things further and use our voices to navigate through a website on our desktop? It’s quite possible. if you check out this WordPress theme called Time Travel, it allows users to use voice commands like homepage – go to homepage, next – go to the next post, previous – go to the previous post, tweet, share, search for, show comments, and much more. You can even build your own custom commands for your visitors. Although its voice command support is currently limited to just Chrome.

2. Go on, read the next one too

Read List

The “Read This List” sidebar on The Daily Beast is fantastic. Scroll down a couple pages and have a look at what it does. The list gives you a visual cue as to how far you have ventured in to an article and encourages you to follow up on the next one. I think it will be qute useful when articles/posts are related or when you have a multi-part story.

3. Want to know more about me?

pop up annotation

If you check out startupsthisishowdesignworks.com you will see that you can effectively move secondary content, which is not integral to the story you are reading, to be hidden from sight. This way you have the option to read more in to it if you choose. Click on the highlighted words to see it in action.

4. Go on, take a swipe at me

Slide on Mobile

With more and more users actively engaging with your site on a mobile device, it’s nice to look at some interesting ways in which you can offer content to these visitors. Many smartphone apps offer the users the ability to swipe to the right to bring up the navigation menu. There are many jQuery plugins like Bamboo and mmenu that can help you add this to your website. And if you want a WordPress plugin for it, then how about trying something like mobile.nav.

5. I just want to talk about this

Inline Comments

One of the things I like about Medium.com is their contextual notes/inline comments as a way for visitors to engage with the author. When you bring up any article on the site you can highlight any portion of the article and leave a note/comment. If you have a passionate community that leaves meaningful comments then this is a great way to engage with them. Visitors can selectively pick out portions of comments they want to read and engage with. Sadly I don’t think there is an existing solution that I am aware of that could get this feature on your site. Do you know of any?

6. Two hands are better than one, or is it?

Footer

Navigation has traditionally always been something that has resided at the top of a web site. But we are staring to see a shift in that design, especially with the rise of mobile. It is a bit of an inconvenience to scroll back up to reach the top of the site to use the navigation menu. Especially since a high percentage of smartphones users tend to use one hand to interact with their device – this study shows that 49% of users tend to do just that. So wouldn’t it be wonderful to show a mobile menu in the footer for easier navigation? If you have a WordPress site then you can use a handy WordPress called Ultimate Flyout Responsive Menu to get a footer navigation menu. (FYI the plugin supports a lot of different navigation options, even the slide to open the menu we saw earlier).

7. I want to know more about you

hover for more info

I really love the fitbit.com website. Its another case of putting secondary information to the background until the visitor wants to take a look at it. If you scroll down to the part where they talk about syncing the device, you will see the option to do it either via bluetooth or Wi-Fi.

8. Unparalleled storytelling skills

Sony

We have all seen far too many sites with parallax scrolling, but when used effectively this technique can be used to convey a powerful brand story, a recent one being the be moved campaign from Sony and the new Mac Pro.

9. Let there be light or not

Last year an acquaintance of mine Damir Kotorić said that we will be using luminosity levels in RWD. And guess what? We are already beginning to see some cool things people are trying to do with luminosity media queries. Check out what Tomomi Imura is trying to do with luminosity media queries and how it could help with screen readability.

10. This was created just for you

verge

What is so new about that, I might hear you ask? Responsive design is based on this premise. If you are an iOS fanboy then you would have loved it when the you seen this article on The Verge, but if you were on Android it would have looked like this, and similarly for Microsoft devices, the page has a ‘metroy’ feel. The exact same story, but looks a lot different depending on the device. We could be seeing a lot more of this in the future.

Concluding

So there you have it folks, 10 things that I think are pretty cool in web design at the moment. Of course as with any new design change it’s important to educate your visitors on the new features, or to provide visual cues that they can easily pick up on.

Of course there are many more exciting things out there, some of which I might have missed so don’t be shy and sound off in the comments as to what are some of the exciting web design elements you have come across recently.


The post Exciting New Web Design Ideas Worth Taking a Look at appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/02/19/exciting-new-web-design-ideas-worth-taking-look/feed/ 0
Good vs. Great Web Design: The Differencehttp://speckyboy.com/2013/11/25/good-vs-great-web-design-difference/ http://speckyboy.com/2013/11/25/good-vs-great-web-design-difference/#comments Mon, 25 Nov 2013 09:24:24 +0000 http://speckyboy.com/?p=45450

While there are no rigid rules when it comes to web design, there do exist certain metrics that can distinguish a bad design from a good one, and even more so, a good design from...


The post Good vs. Great Web Design: The Difference appeared first on Speckyboy Design Magazine.

]]>


While there are no rigid rules when it comes to web design, there do exist certain metrics that can distinguish a bad design from a good one, and even more so, a good design from a great one.

Yet, there indeed are many practices that you can implement in order to ensure that your web design endeavors rank among the good ones — clean typography, proper usage of colors, responsive and minimal design, and so on. The question is: how do you take your good design to the next level? How does a good web design become a great web design?

As a designer, you are not just competing against the others in the industry — instead, you are also attempting to outdo your own past works. Naturally, now that you are already knowledgeable about typography and colors and other design aspects, it is time you moved on to ideas that can transform your good design into a great one. And in this article, I shall be discussing those very ideas!

Overview: Your Side of the Story

As a designer, you must already be having an idea of what separates a good design from a great one. In all likelihood, it all boils down to aesthetics, doesn’t it? In fact, not just designers, but any creative-minded person tends to choose aesthetics over anything else. As such, if a designer were to be shown two different designs and asked to pick the better one, he or she will go for the prettier one.

Of course, in this case, the definition of “pretty” itself is different — when designers say ‘pretty’ or ‘good-looking’, they are not referring entirely to eye-candy. Rather, there is also a reference to usability and judicious design elements, such as clever usage of colors, readability and proper typographic choices, and so on. This is what makes a designer’s job important: not everyone can define aesthetics as a combination of usability and beauty (and if everyone were able to do so, designers won’t be needed, right?).

The Other Side of the Story

In a perfect world, there will be no difference between creativity and marketability. Sadly, ours is not (yet) a perfect world, and differences do exist. As a designer, you may claim that proper aesthetics deserve the foremost position in acquiring the user’s attention, but the marketers will try to pitch the idea that a design can convert well only if it addresses the needs and requirements of the end user, be they psychological, financial or social.

Thus, from the marketers’ perspective, aesthetics do not play the primary role when it comes to conversion rates: what matters is the fact that the end user should feel a sense of connection with the design. Overall, for your clients, an effective design is almost always preferable over an attractive one.

Combining The Two Sides

A great design is something that gets the job done without sacrificing on any aspect. A great design is both attractive and effective, but at the same time it is also functional. It is only when you combine these three qualities that your design can be called great.

Perfectionism: Attention to Small Details

Focusing on details does require efforts, but it is an established fact that if you focus on the small details of a project, the end result will be a more polished design. Minor elements such as that odd icon or that border which would otherwise be overlooked are what distinguish a mediocre or average looking web design from an excellent one.

As such, if you are eyeing to become a great web designer, you should have a perfectionist bend of mind. Any design can be good, but if you invest those few extra efforts and pay keen attention to small details, your good design will automatically be transformed into a great one. Such extra efforts are what set a design apart — compromising on even the minutest element of your design will act as a roadblock between the actual design and the image of a ‘great design’ that you had in mind.

Thinking Differently

Creativity cannot be taught by the book, but it can surely be improved by experience. You can train yourself to think creatively and look at things from a different perspective. Of course, most design projects have a clearly defined end goal that needs to be met, but you can attempt to improvise on the different approaches that can be taken to accomplish the end goal.

Stepping out of one’s creative realm is not rocket science; all it requires is a desire to discover ways in which an already existing and impressive design can be improved. Most of the time, you need not do anything out of the blue; instead, you just need to think beyond the box when it comes to design aspects such as color schemes, typography or layout.

Keeping Your Users in Mind

Quite often, usability comes out as the distinguishing factor between a good and great design.

If you are looking at the usability patterns of a given design, do not simply check out what works, but also pay attention to why it works (tools like Firebug are helpful). A critical eye that can study and deconstruct other great designs is a must in this case, especially because your clients may just ask for a website that can help their business, whereas the end users will be looking for a website that keeps usability to the fore. As a designer, it is your task to strike a balance between the two expectations.

Conclusion

Web design is a profession where you cannot allow your skills to stagnate. If you intend to become a great designer, you should regularly update yourself with the latest trends, innovations and technologies in design.

Furthermore, you should bear in mind that the difference between good and great web designs is not simply limited to colors and fonts. It is more a product of aesthetics, effectiveness and functionality, all merged together to produce a design that is not only visually appealing but also usable.

What are your thoughts regarding good vs. great web design? Share them with us in the comments below!


The post Good vs. Great Web Design: The Difference appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2013/11/25/good-vs-great-web-design-difference/feed/ 0
Designing for the 3 Second Rulehttp://speckyboy.com/2013/11/18/designing-3-second-rule/ http://speckyboy.com/2013/11/18/designing-3-second-rule/#comments Mon, 18 Nov 2013 08:31:31 +0000 http://speckyboy.com/?p=45137

3-5 seconds! Yes that’s all it takes to make a great first impression. I know this sounds like an atrociously low time frame to create an impression, but that’s the way it is! What you...


The post Designing for the 3 Second Rule appeared first on Speckyboy Design Magazine.

]]>


3-5 seconds! Yes that’s all it takes to make a great first impression. I know this sounds like an atrociously low time frame to create an impression, but that’s the way it is! What you see or hear in these initial few seconds, shapes your opinion of the person.

Now, this got me thinking, isn’t it the same with websites? Website users are known for their ruthlessness and impatience vis-à-vis website that does not deliver on their expectations. In as good as a few seconds, these visitors make up their minds whether a website is good or bad. That means your website design is under tremendous pressure to make an immediate impact. For those who say this is a difficult task, I say this is a near impossible task. You can never be sure, whether you can capture the attention of your website visitors in a few seconds.

But, what if you want to design for the 3 second rule, that is, make sure your website manages to make an impression in the first three seconds that users spend on the site? What if you want to put your design under pressure? And what if you want your website to make a resounding impact, no matter what?

Here’s what you can do:

1. Impact Design is Unique

Don’t come up with the tried and tested ideas that make the rounds of the World Wide Web. Take risks, and think unique. Such designs might or might not work, but if they do, you’ll have a really successful website on your hands.

This is Diesel’s page showcasing Diesel’s Fall Winter 2013 collection of Shoes, Bags & Accessories. Notice the use of emotional galleries and the innovative navigation that captures immediate attention. It’s the navigation that is the tour de force of the page, and acts as the element used to help engage the visitors and make an impression on them.

Story Pixel is a site that does this really well. It goes retro with its design theme and captures the attention of its visitors instantly! It is the kind of site that captures immediate interest; you look at it and you want to know more about it.

2. Using Illustrations to Make your Case

If you want to stand out from the crowd, you can’t beat the power of illustrations to carry the day. The problem with using illustrations is that not every web designer is a good illustrator. Creating a really effective illustration requires a herculean creative effort oozing with artistry. This is why many web designers avoid using illustrations on their websites. But, who said anything about web design being easy. So, create an impression with illustrations, the way these sites are doing:

Red Ape is an Illustration, Animation and Creative Design Company and its Home Page leaves no room for doubt as to its purpose. So, you got an illustration, a storyboard, 3D graphics, and the works on the Home Page. Don’t say it isn’t impressive.

The landing page of Stereo Creative makes use of banners to showcase a collection of abstract illustrations and the work they have done. This is again something that makes it’s point brilliantly.

3. Using Emotions to Make an Impact

Emotive appeal helps build an immediate impact. It’s something that persuades visitors to react in a certain way, immediately. Most successful websites on the World Wide Web have emotions woven into them. These emotions are a result of the visuals, the text on the pages or a combination of the two.

There are lots of things happening on Gopher Gridiron. You look at the visuals and you have a sense of drama that characterizes a hard fought game of American Football. Immediate attention is guaranteed.

Charleston Family Fun is what fun family holidays are all about and each and every pixel of the design screams ‘fun’. The emotions are so brilliantly implemented through the design that you get right into the holiday mood, when you look at the website’s design. It’s a perfect example of how emotive appeal can make an instant connect.

4. Go Back into the Past to Make an Impact in the Present

I have personally found making use of nostalgia to create impressive websites, work every single time. The use of nostalgia in websites gives out a feeling of being loved, protected and a plethora of other feelings that make the necessary impact on the website visitors. But the use of nostalgia must have some purpose in mind and align itself with the website’s message. Something that Milk Every Moment does brilliantly:

The site’s purpose is to promote drinking milk, by stirring up the fondest memories of our childhood. You open the site and you’re greeted with retro design elements with a video banner playing some nostalgic videos. Even if you aren’t a milk lover or are lactose intolerant, you’ll still end up loving the site.

5. Say the Right Things

Content has always been King and when it comes to creating a decisive impact with the website design, it is more than just king, it’s actually everything.

Moz is a company that helps businesses market themselves better on the internet. It makes great use of content to make its point and relies very little on visuals.

Accenture is another services specific site that uses content brilliantly to capture the attention of visitors. The best content is one that answers all the right questions, and that’s illustrated by this site perfectly. It also showcases the credibility and authority of the business that the website represents.

If you’re not able to zero in on the right visuals for your website, it’s better to focus on its content instead; this will help you grab the necessary eyeballs.

End Words

As I mentioned before, making sure your website makes a great first impression on its website visitors isn’t easy. But web designers are doing it, and the examples in this article are proof that they are doing it well. So, there is no real reason why you cannot do it as well. All it requires is a bit of effort in the right direction, and stretching the limits of your creative instincts and technical proficiency. If you do this, you are bound to succeed. All the best!


The post Designing for the 3 Second Rule appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2013/11/18/designing-3-second-rule/feed/ 0
Current Design Trends for Blogs and Online Magazineshttp://speckyboy.com/2013/10/28/design-trends-for-blogs-and-online-magazines/ http://speckyboy.com/2013/10/28/design-trends-for-blogs-and-online-magazines/#comments Mon, 28 Oct 2013 09:51:53 +0000 http://speckyboy.com/?p=44880

Digital website magazines on the Internet are becoming the easiest way to consume news & information. Many web designs are responsive which allows reading on mobile devices, and you aren’t even paying for the privilege....


The post Current Design Trends for Blogs and Online Magazines appeared first on Speckyboy Design Magazine.

]]>


Digital website magazines on the Internet are becoming the easiest way to consume news & information. Many web designs are responsive which allows reading on mobile devices, and you aren’t even paying for the privilege. The popularity of simple open source CMS’ like WordPress makes it even easier to launch your own project online.

In this guide I want to look at some premium WordPress themes as examples for current design trends. By studying these current trends designers may also speculate potential changes for the future. The Internet has grown so quickly in a very short time period – who can really know for certain what the next phase will be?

Obscure Homepages

Something that has always caught my attention is the uncertain design pattern on magazine homepages. Often you will find some large heading panel with featured articles, possibly rotating or shifting between stories. There is also usually a set of different cascading post displays focused on categories, recent topics, popular articles, or even specific authors.

valenti wordpress premium theme design wp

The new Valenti theme is a good example of this complex homepage layout. The first 5 posts are displayed in a block-level thumbnail widget. But you’ll also find a small image rotator beneath this, followed by some latest posts and then columns of post categories. In some cases you will find yourself way too confused at the mass of content strewn across the page.

When considering your homepage design make sure that it’s easy to follow along. As a reader myself I can imagine being too overwhelmed by the complexity and just leaving a website before reading anything. But if you plan well then you may be surprised how many people actually like the semi-disheveled style of skimmable homepages.

Trending Posts

Popular breaking news and trending topics are sometimes displayed as news tickers. These will show one post headline at a time for just a few seconds before moving onto the next one. Definitely check out the header on Manshet to get a better conceptual idea.

manshet premium wordpress theme homepage breaking news

This design is really cool because it features the news ticker along with a slideshow of breaking news. This has post thumbnails to draw more attention than just plain text. But all of these elements appear towards the top of the page. It’s an area above-the-fold which visitors will notice right away.

I feel like this idea only works on a blog or magazine with a lot of content. Meaning typically more than 1-2 posts each day. If your magazine is constantly publishing news articles then you need a method to differentiate the more popular stories from milder ones. These top headline sliders and news tickers are definitely one trendy solution.

Prominent Author Features

Weblogs have always been partially about the author behind the website. Readers who fall in love with a blog eventually try to learn more about the writer. Magazines do try to make this a lot easier with more featured details promoting the authors themselves.

You will notice articles that include a full author bio, links to their website, and even other external links onto Twitter or Facebook. An example article from the Hickory theme includes a direct link to the author’s Twitter account underneath the post headline. It also directs to the author page itself listing all of their articles on the site.

hickory theme wordpress premium design author info

Giving readers a more intimate connection with the staff helps to build a small community around your website. Readers may come back just to check out a certain author because they really enjoy their articles. Over time you can build a reputation for your website within dynamic niches for really powerful content. Try including other social links onto Tumblr, Pinterest, Instagram, or whatever your writers may benefit from promoting.

Relatable Footer Content

Every website needs a footer even if it’s just one line. Sometimes this will basically focus on copyrights or simple internal page links. But an online magazine is such a different beast altogether that you have to marvel in some of these footer designs.

intouch wordpress premium theme design footer api links

The screenshot above is from an example theme called InTouch built for WordPress. Notice that these are most likely footer widgets, but they format perfectly into columns based on the responsive design. You can definitely include simple elements like tag clouds, site information, and links to contact/company pages.

But also notice the connection into 3rd party services like Instagram or Flickr. You can pull data from your own account using APIs and display these into widgets on the page. A website’s footer may be the best placement because it won’t get in the way of your main content or advertising space. The goal is to make your footer relatable to the viewer. Make them feel like your magazine is just a typical website, big or small, and present content which will keep them engaged for a little while longer.

Reviews & Ratings

I think that any product in regards to movies, music, gaming, food, books, has the ability to be reviewed. People thinking of buying or consuming something may want to know what your magazine thinks of it first. And so internally-powered review features have become very prominent within online magazines.

These reviews typically come from the author who may leave some positive and negative feedback. It could be presented in a 5-star rating, or in a numerical system which talks about different properties(acting, directing, screenwriting, music, etc). You’ll notice this example on a premium WP theme called Flavor.

video game review flavor theme premium wordpress

It’s interesting because this theme also allows users to vote on each of the stories as well. This means any review post has the author’s rating along with the collective readership’s rating value. If your magazine has a tremendous audience it may be worthwhile to get into reviewing products more frequently. It can sometimes lead to deals with companies or Internet publishers who need market exposure on their new product/service.

Another fantastic design example by Industrial Themes is called Steam. These reviews, much like the other theme, include ratings for various aspects of the product itself. And it also features little trophies or detail icons which explain the type of content in the product.

steam magazine theme wordpress premium screenshot review article

For one example looking at this video game review you’ll find icons for details like underwater gameplay and multiplayer support. This is a really cool feature but it’s not always going to be necessary, depending on how many things you review. Sometimes it is easier for a magazine to keep it simple and provide one single rating value – then leave all the detailed explanations for the article content itself.

Regardless it should be understood that magazines are adopting this review & rating system, along with simpler interfaces like total view counts or total likes on a single article(internal likes not Facebook likes). If you feel these added features could benefit your blog or magazine then definitely find some time and build it out! You may be surprised how many people are willing to interact with your articles, leave feedback, and even return again sometime in the future to read more.

Closing

I know these are some generally basic ideas since they’ve been coded into websites for a long time. But we have never seen online magazines growing so quickly – magazines which also never had their own print version in retail stores. I do hope these suggestions may help webmasters or WordPress developers who are looking to build a useful product. Similarly if you have any questions or comments on the topic feel free to share with us in the post discussion area below.


The post Current Design Trends for Blogs and Online Magazines appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2013/10/28/design-trends-for-blogs-and-online-magazines/feed/ 0
UX Design for HTML/CSS Mobile Web Applicationshttp://speckyboy.com/2013/10/25/ux-design-for-htmlcss-mobile-web-apps/ http://speckyboy.com/2013/10/25/ux-design-for-htmlcss-mobile-web-apps/#comments Fri, 25 Oct 2013 08:25:45 +0000 http://speckyboy.com/?p=44637

Mobile iOS devices were a step towards popularizing the idea of web applications. Web developers could build pages with HTML meta tags creating app icons to be saved onto the homescreen. Modern JavaScript techniques are...


The post UX Design for HTML/CSS Mobile Web Applications appeared first on Speckyboy Design Magazine.

]]>


Mobile iOS devices were a step towards popularizing the idea of web applications. Web developers could build pages with HTML meta tags creating app icons to be saved onto the homescreen. Modern JavaScript techniques are able to duplicate animations in combination with responsive web design.

For this article I want to go over some user experience trends for mobile webapps. These are commonly built for users on any mobile platform who would rather access the content over an Internet connection. Building a web application is also easier if you don’t wish to learn Objective-C or Java programming.

Common Usage

There are plenty of methods to build a single HTML/CSS web application from scratch. JavaScript is helpful when you need image galleries or dynamic menus. But there is certainly no requirement to use JS codes in your mobile project.

uscity fiddlefly mobile webapp design ui screenshot 2013

This example for the USCity website tries to access HTML5 data location from the browser. It is built using minimal CSS along with simplistic page elements. The design is honestly superb with their unique menu lists and icons. The photo gallery uses a plugin named Swipebox for mobile responsive images.

barista prima homepage mobile webapp ui design

Now the website for Barista Prima is a great example of mobile responsive design. The user interface changes when you resize the browser and generally looks the same for mobile devices. Both tablets and smartphones provide a single viewing experience which is planned inside the website code. I like to contrast this example because it demonstrates how you don’t need to build just a web application.

In some instances this will be a smarter idea if your webapp needs to be seen like an application. But other times you may want to build an entire website that is also supported to behave like a mobile application. There are no rules or regulations when it comes to responsive updates. Do whatever you feel is right and do what will ultimately look best for your project.

Sencha Touch

I don’t often recommend libraries for web applications but Sencha is fascinating. The JavaScript is very complex but if you spend a couple weeks studying I guarantee you can learn the basics. Sencha Touch is a free library for building common UI components like data lists, tab bars, back buttons, and other similar ideas.

If you have the time I would recommend checking out the Sencha HTML5 gallery full of websites. Not all of these examples provide beautiful designs but they can demonstrate what is possible using this library. I have always loved Sencha Touch although it is fairly difficult to learn.

sencha touch kitchen sink screenshot 2013 webapp

The online kitchen sink is like a tour of Sencha’s features. This online demo showcases almost everything you can do and the various components which may be coded into a webapp. If you are a JavaScript developer and want to try this out it may be worth your time. Getting started is rough but with some practice you can learn how to build thorough applications quickly.

One personal favorite example is the Railsberry website which was designed solely for mobile users. Unfortunately the conference has updated their website now, and the mobile app doesn’t work anymore. But you can see various shots on Dribbble which illustrate just how sleek this Sencha library can be.

jQuery Mobile

The other big mobile library I would recommend trying is jQuery Mobile. This is built on top of the jQuery foundation coupled with its own set of traits. This library adds effects onto HTML5/CSS3 elements which makes it so much easier to learn in comparison with Sencha Touch.

benjamin moore paint webapp jquery mobile design interface

You will notice from the Benjamin Moore website that mobile webapp development can be very easy. These pages each load onto another page using a URL. This means it could require an Internet connection unlike some other local web applications. I really love this example because it provides all the features you would expect in a mobile app. And it even performs nicely on a wide desktop monitor too!

visit idaho website mobile webapp jquery webdesign screenshot

Another example of the jQM interface can be seen on the Visit Idaho website. They use brilliant textures and background imagery to blend into the concept of visiting their state. I really love the menus and graphics, which admittedly look a lot nicer on a mobile screen. These few webapps should give you ideas about how to implement the jQM library and what is possible with just a bit of HTML and CSS customization.

Free Graphics

Along with the examples above I want to showcase a large number of freebie graphics for mobile web design. Most of these graphics were designed for mobile apps native to Android or iOS. But obviously you can implement the graphics in HTML/CSS if you have the patience. They’re also perfect to construct a PSD mockup or wireframe in Photoshop.

iOS Mail App PSD

ios mail app psd freebie graphics

Noise UI Kit Freebie

dark noise ui kit mobile app design

Dark iPhone UI Freebie

dark iphone psd ui kit freebie download

iOS Chat Elements

dark iphone ios chat messages interface psd

iOS Sidebar Menu

ios sidebar menu sliding navigation psd freebie

10 Free Navigation Bars

psd freebie dark ui navigation bars download

deviantART Splash Screen PSD

freebie psd ios app download deviantart splash homepage

Free Source Codes

Along with PSD graphics there are also lots of source code examples online. My favorite website to play with example projects is CodePen. The interface is magnificent and it’s so easy to fork your own copy of a project and mess around in the source. See if you can utilize any of these projects when crafting your own HTML/CSS webapp.

iOS Webapp Bookmark Reminder Bubble

bubble tooltip ios webapp bookmark codes

Sexy iOS Webapp Bookmark Bubble

yellow beautiful ui bubble save ios webapp

Definition List UI

ios style definition list user interface open source

iOS-Style Sliding Nav Menu

ios hidden sliding navigation menu design

Flat Mobile Portfolio

flat colorful mobile portfolio webapp open source

iOS7 Style Switches

animated colorful on off switches ios7 codes

Sticky Header Sections

sticky headers sections css3 web design open source

Android Address Book

simple flat android designed address book webapp

Mobile-Optimized Signup

mobile optimized signup form buttons minimal free codes

Mobile Twitter Login Form

mobile twitter login form inputs html5 css3 design

Related Links

The sphere of mobile Internet users is growing rapidly with no signs of stopping. As more countries around the world adopt smartphones it will be easier to access information than ever before. The official smartphone app stores are always a good choice, but there is nothing wrong with mobile web development. Sometimes it can be easier to launch a project on HTML/CSS/JS and I hope this article may spur ideas for any interested developers.


The post UX Design for HTML/CSS Mobile Web Applications appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2013/10/25/ux-design-for-htmlcss-mobile-web-apps/feed/ 0