Articles by ‘Jake Rocheleau’

How To Wireframe iOS App Interfaces using Photoshop

fireside-ember-app-wireframes

Much like building a website, mobile app design is a very detailed procedure. Although it may not be sociological rocket surgery(some might say otherwise) but even the best app designers will spend years studying the craft and still have a lot to learn. One of the earlier stages in both website & mobile app design is called wireframing.

This is a bare-bones template of the layout which includes the most important page elements. Content should be kept to a minimum used sparingly on an as-needed basis. Wireframing pushes a direct focus onto the experience – basically how a user will interact with the application. Many designers prefer to draw these by hand but there’s always an option to design wireframes using graphics software.

In this post I’d like to offer an introductory guide to wireframing for iOS apps, and specifically how this can be accomplished using Adobe Photoshop. Other programs like GIMP or Sketch also work just fine. The goal would be to create a layered wireframe which can be edited and rearranged to fit a working mobile app prototype.

Read More »

Popular Design Trends for Responsive Navigation

The mobile responsive website layout has become a very common apparatus for designers. Building a layout is never easy and each website generally requires a unique solution. Responsive design incorporates both desktop and mobile devices to provide a uniform browsing experience. I have seen a lot of fantastic examples showcasing responsive web design trends.

In this article I want to focus particularly on navigation menus. To build a responsive navigation you need a technique for handling the resize down to lower resolutions, or consequentially handling the expansion for wider desktop monitors. Check out these various techniques which are my choices following the most popular ideas for responsive navigation. There are obviously some other solutions out there, but this collection should give you ideas for getting started with your own responsive designs.

Block-Level Menu Links

Consider navigation menus which are using single box-style links in an orderly fashion. As you resize the window, these boxes either need to shrink or re-organize themselves. Block-level responsive menus are those which are designed to always keep the links showing in various positions on the page.

william csete portfolio website layout inspiration

Read More »

How To Code Unique Avatar Photo Styles with CSS3

The popularity of social networking has converted a lot of websites to be more user-centric. This means you can find loads of new profile features and direct-connect OAuth apps through Twitter, Facebook, Tumblr, Pinterest, and others. Typically the profile photo is a common facet to each profile webpage design. Photos or avatars can be uploaded by the user, and sometimes pulled directly from their other accounts online.

In this tutorial I want to demonstrate 5 specific user avatar styles with CSS3. You may utilize any of these features on your own website or startup idea. Design trends have been advancing where new CSS properties are becoming much more widely supported. This means frontend developers can start really pushing the boundaries of how we style media in webpages. The user experience of a profile page is definitely a good place to start.

How To Code Unique Avatar Photo Styles with CSS3

Read More »

Displaying JavaScript Modal Windows using Bootstrap

It is true that Bootstrap has grown to include supporters from all around the globe. As there are plans for a Bootstrap 3 release I want to go into detail for one topic in particular. The Bootstrap JavaScript effects are not always useful to developers, so JS files are not necessary for running the whole framework. But they do provide quicker features to define common UI elements without having to reinvent the wheel.

I want to focus this tutorial on using modal windows within a typical webpage. We just need to include two files out of the Bootstrap framework. And the JS codes are not overly complicated to understand. My example demo allows users to dynamically update the background color, so this does admittedly have some more sample JS then you will need. But it is an excellent introduction to adding these brief components into any ordinary website.

Displaying JavaScript Modal Windows using Bootstrap

Read More »

Build a Single-Page Sliding Navigation Bar with jQuery

Many web design studios and freelance portfolios will incorporate the popular single page navigation technique. The benefits of such a layout allows visitors to go through all your main content without needing to reload the website. Additionally this helps to keep the interface very simple and easy to maneuver.

In this tutorial I want to demonstrate how we can build a demo single-page layout with sliding navigation effects. I will be using the jQuery One Page Nav plugin which offers more control onto each of the page elements. Additionally the layout is standards compliant with HTML5 and CSS3 specs and the nav will still load properly in browsers where JavaScript is disabled. If you want to catch a glimpse of the final product we are building check out my demo page below.

Build a Single-Page Sliding Navigation Bar with jQuery

Read More »

How To Build a Fullscreen Background Video Player

After looking over countless jQuery plugins I have seen a lot of new HTML5 video techniques. The audio and video elements have created a new method of publishing digital media, streaming off a web server. But developers have been hard at work customizing these features to be used within advanced layouts.

In this tutorial I want to look at using big video backgrounds within typical website layouts. I’ve chosen the jQuery plugin BigVideo.js which includes a list of resources in the documentation. We can setup genuine HTML5 videos streaming as backgrounds behind the main page content. It is not an easy setup, but I’ll provide a clear step-by-step process to follow along.

How To Build a Fullscreen Background Video Player

Read More »

How To Code a Vertical Accordion Nav Menu with jQuery

Website navigation is an important aspect to any functioning layout. Users will often be looking for methods to traverse over your pages, and sometimes this requires a bit of creativity. I love the idea of vertical navigations especially with sub-menu links.

In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click. Using this method we can also build sub-menu links, splitting up headers by ID or class names. Follow along with the ideas below and feel free to download a copy of my source code.

How To Code a Vertical Accordion Nav Menu with jQuery

Read More »

CSS3 Image Gallery with Dynamic Caption Text

I have run into lots of tutorials on the web focused around creating stunning image galleries. These often include photo boxes or alternate JavaScript-enhanced functionality. Nominally in the modern era of web design there isn’t any problem with dynamic scripting.

For this tutorial I want to show how we can build a standards-compliant HTML5/CSS3 image gallery with fading captions. We will be using CSS3 transitions to create the animated effects. Also I have been working with a number of CSS3-specific properties on this tutorial alone. It leaves room for interpretation if you wanted to implement a JavaScript frontend animation using CSS3 as a fallback.

CSS3 Image Gallery with Dynamic Caption Text

Read More »

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

There are a lot of tutorials out there explaining the major benefits of building an e-mail newsletter. It definitely draws attention to your website and helps regular readers keep up with new publications. But not everybody has the time or knowledge to build their own newsletter design.

In this tutorial I want to go over the process of building a very basic HTML newsletter. I’ll explain some key steps along the way and you can grab a copy of my source code as well. When you’re building HTML code for e-mail clients the work process is a whole lot different. But once you understand the basics you’ll have an easier time working with more complex layouts.

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

Read More »
Page 1 of 212