Posts Categorized: Web Design

Photoshop to Edge Reflow

Posted by & filed under Web Design.

ps_to_reflow

Adobe have been working on a slew of ‘Edge’ branded products of late and the latest tool in development (and it is still in preview stage at the moment,) is Edge Reflow. What makes Reflow remarkable is that it is the only software that allows visual designers the ability to demonstrate their designs responsively. In […]


3D Tweet Archive

Posted by & filed under Web Design.

3D tweetArchive CSS3

The idea behind this tutorial is if you’ve ever been to a conference, event or training day and there are a whole bunch of interesting tweets floating around that afterwards you wished you’d favorited but didn’t. Maybe you’ve then left it too long to find them again and cursed yourself for not having the foresight […]


CSS3 Angled Website Design

Posted by & filed under Web Design.

angled-css3-layout

In this tutorial for Web Designer magazine I was commissioned to create a website using CSS3, so I opted for an angled background by rotating the div elements with CSS3. This provided some issues with getting background images to stretch across and fill the background. I usually use the CSS cover method but this didn’t […]


Adobe TopCoat UI

Posted by & filed under Web Design.

topcoat

Adobe are working on a set of UI components called TopCoat. This is not a framework but merely a CSS file that contains many useful UI elements for creating projects. The project came into existence because of PhoneGap, some designers did not require a full framework such as jQuery Mobile in order to create the […]


Foundation 4 Tutorial

Posted by & filed under Web Design.

found4

There are so many good responsive frameworks around for Web Designer’s today that it seems almost pointless to create your own responsive design. Foundation 4 has recently been released and it claims to be “the most advanced, responsive framework in the world”. In this tutorial created for Web Designer magazine I take a look at […]


Edge Reflow First Look

Posted by & filed under Web Design.

reflow

Edge Reflow is a new tool from Adobe to help Designers create multiple screen sized designs. Think of this more like a design tool than a code tool, the idea being that you offload the design to a coder. Yes the tool will produce output for you but at the present time this only works […]


Customizing Bootstrap Tutorial

Posted by & filed under Web Design.

bootstrap

Working with Bootstrap is a great way to kick start your responsive web designs. The only problem is that quite often you can spot a Bootstrap site a mile away. Default elements such as the navigation and some of the buttons, makes it quite easy to spot. In this tutorial, commissioned by Web Designer magazine, […]


Create WebGL content with fallback to Canvas

Posted by & filed under Motion Graphic, Web Design.

flame

WebGL is well supported but there are a few browsers that don’t support it and on mobile/tablet the support is also sketchy. If you are planning on adding WebGL content and you are planning on using the ThreeJS framework, then help is at hand. ThreeJS can render as either Canvas or WebGL, as such with […]