Alex manages design and front end development for sitepoint.com and is SitePoint's Design and UX editor.
We had some wonderfully thoughtful and incisive comments on our Star Wars Poster Redesign Competition. The time has come to announce the winners.
Firstly we can announce that Gabrielle’s sinister kabuto-inspired design has won the popular vote. Regardless, it was great work by both Gabrielle and Annarita.
And now for the Mighty Deals prize packs.
Choice of ANY five (5) Deals from the Mighty Deals Collection.
- Winner: janberry
4 people win any two (2) Deals from the Mighty Deals Collection.
We will make contact with each of individually to organise your prize pickups. In the meantime, browse the excellent Mighty Deals catalog and pick out your packs.
Thanks so much to everyone who contributed, and special thanks to Mighty Deals for supplying some great designer/developer prizes.
And finally a question: Would you, our readers, be interested in doing a challenge like this with us for prizes and glory?
Mighty Deals have been a great supporter of SitePoint, as well as a great reservoir of cost-effective front-end resources for developers — including everything from fonts to textures to patterns to brushes and more.
Today we’re going to combine the two, and you get benefits!
Firstly we set a brief for two of our favorite SitePoint design authors – Gabrielle Gosha and Annarita Tranfici.
1). Re-design the original Star Wars Poster, but set the story in an entirely new universe/genre. This could be cowboys, gangster, steampunks, rom-coms, buddy-cop films or bollywood.
2). Choose any two Mighty Deals deals to help your design.
3). Present your poster.
4). Tell us what you did, what deals you selected and why.
You guys get the easy bit! Simply tell us in the comments which poster you like best and why.
We will pick 5 winners out of the comments:
1) First Prize: 1 Person to Win Any Five (5) Deals from the Mighty Deals Collection.
2) Second Prize: 4 People to Win any Two (2) Deals from the Mighty Deals Collection.
Ophelie and I will select the winners on Thursday 19th June.
Designers always loved Helvetica. And they redeclared their love for it constantly. In film. On countless t-shirts. Pinterest collections. Hell, there’s even a Helvetica perfume! As a typeface, it’s always been the ‘Glenda the Good Witch’ to Comic Sans’ cackling ‘Wicked Witch of the West’. But some time around 2010 something happened to the relationship. […]
What’s the big deal about SVG, anyway?
Don’t you just hit ‘Save as SVG’ in Illustrator, and you’ve got yourself an SVG?
Yes and no. While it’s technically true, by the same logic, every MS Word user is technically a web developer.
Perhaps the question to ask is: Is that SVG file any more useful than an equivalent PNG or JPG?
Often the generated SVG files we get from graphics apps are not actually very much use outside the application that made it.
The real power of SVG becomes clearer when you’ve got a readable, manipulatable document — and not a dense, arcane document ejected from a graphics app.
Today, I want to give you a speed guide on the basics of SVG, and how to get files that you can work with.
In the weeks that follow, we’ll cover some more interesting thing you can do with these files.
SVG 101: How do you create an SVG?
Arguably, the coolest thing about SVG is you don’t need fancy (or expensive) software to make them. Just like your HTML/CSS files, you can create an SVG with nothing more than trusty ol’ Notepad, Textedit or even VIM.
Working with SVG over the past year, I’ve sometimes felt like there are two different kinds of SVG.
The ‘Save As..’ SVG
These ‘Save as’ SVGs are tangled, needlessly complicated files commonly spat out of a range of vector editing apps. They’re riddled with bad markup practices, and meaningless app-specific code.
These files are to SVG, what MS Word is to HTML.
Sure, they’ll probably render ok in a modern browser, but the underlying code is deeply ugly and difficult to manipulate outside of the editor that created it.
The ‘Hand-cut’ SVG
other type of SVG is a simpler, well-organised, often hand-edited file. You’ll know these files when you come across them, because when you browse them in a text editor, they make as much sense as any well-written HTML file.
It’s this clarity that really unlocks the flexibility of SVG on the web, so turning the first type of SVG into the second type is a super-valuable move.
WebCode from PixelCut is a different kind of vector graphics apps — an app that constructs SVGs from bare bones — not as an afterthought.
Today’s article is going to be the first in new series called ‘Nailing the Detail’. Each week we’re going to pick a famous ‘style’ or ‘design movement’, tell you a little about it’s history and where it fits in.
Then we’re going to try to help you incorporate that look into your web design.
Today we’re starting with Bauhaus!
Let’s go back. Waaay Back..
To understand the Bauhaus movement, it helps to know a little about the time before it.
Throughout most of recorded history, every item we used — chairs, pots, hammers, fabric — was handmade, one-by-one, by a person in a shed somewhere.
While these items weren’t always beautiful, even the simplest of items was generally, at least ruggedly functional, because each had been individually crafted and considered by it’s maker.
However, by the mid-1800′s, the industrial revolution was really getting up a head of steam — literally! — and things had changed. Volume and production speed was the name of the game.
Rachel Nabors is one of those relatively rare creatures — a talented artist and illustrator, who can still think natively in code.
Starting as a comic artist for Gurl.com, before taking a right turn into web development, she now lives the life of a jet-setting talking-drawing-animating super-hero!
Last week, I had the chance to chat with Rachel about X-Men, anti-aging creams, SVG and her Future Of Web Design workshop in early April.
SITEPOINT (Alex Walker): Hi Rachel and thanks so much for giving us some of your time. I’m one of many that has been enjoying your ‘Infinite Canvas Screencast’.
RACHEL: Hi Alex! Thanks for watching Infinite Canvas! We have a super exciting interview coming up, just as soon as my laptop comes back from repairs ;)
SITEPOINT: You seem to have a lifelong love of comics and animation. What are some of the comics or cartoons that got you hooked when you were growing up?
RACHEL: When I was little, I watched shows like Tiny Toon Adventures and Animaniacs. I particularly loved the darker tones of series like Gargoyles and Batman: the Animated Series.
Around 10 I got into comics because of the X-Men cartoon. I do not think the cartoon was particularly well animated (or written), but I fell in love with Rogue, a redheaded superheroine who could fly and crack boulders (sound familiar?).
That got me into comic shops, buying X-Men comics. But as I entered my teens, I wanted more from the stories.
A couple of weeks ago we were lucky enough to have Will Dayble in the office to take us through his ideas on app design and MVPs (Minimum Viable Products). Will is infamous for his User is Drunk video. Enthusiasm is a wonderful thing, and when you’ve got a great core idea, it’s very tempting […]
Bringing a UX person in at the tail-end of a project is a bit like getting your plumber in after you’ve finished plastering and painting. It’s likely to be difficult and expensive. Jodie Moule, author of SitePoint’s Killer UX Design, talks about a UX process that begins long before a line of code is written.
Star Wars and web technology. Could this be a closer fit than anyone has previously imagined? SitePoint Group Lead Designer Alex Walker has a bit of fun. Join in.