Launch: The all new Basecamp →
New launch, this took years, finally. Giving it a test run now.
Ramblings about Tech, Design and Life by
Andrés Max, a Software Engineer and UX Designer.
Popular Post » Getting Started With Wireframes
Posts tagged "design"
-
-
Y Combinator startup caught stealing from 37signals →
Way to launch a company guys. How would these people not think they were going to get caught. Shameless.
-
New Jolicloud Website →
Beautiful. But when did they pivot from being a linux distro? This one big pivot.
-
Inspiration vs. Imitation →
Jessica Hische:
Something that I sadly hear too much is that “it’s not illegal to copy someone’s style”. Sure, if you create an illustration that is completely derivative of someone else but not a direct rip-off or tracing, they might have a hard time suing you. That doesn’t make it OK to make derivative work.
There’s a difference between being “inspired” and straight up ripoffs. Jessica offers a new perspective on the subject addressed to those who are just getting into the design world as advice.
Take it as needed, very good post.
-
Copycats →
It’s thus pretty easy to see why copying happens - because when you see a mature product that’s somehow managed to innovate (to be “new” whilst balancing all the constraints and annoyances of the existing problem), it becomes almost impossible to see how you could do it any other way.
-
The New Boston Globe Website →
Beautiful, responsive (resize your browser, it adapts to devices) and soon to be behind a paywall.
-
Should designers know how to code HTML and CSS? Yes, and so should developers. →
Today’s discussion around the design world is a good one.
Marc Drummond:
…a designer needs to be able to work with HTML markup and CSS, because that is how a website is created, that is how we design on the web. Design in the browser.
To not do so, to pretend that websites are a series of static pictures within a certain set of dimensions, is to deny the rich flexibility and possibilities that the web offers.
Agreed. Agreed. Agreed. Would a Ferrari engineer know how to create a great car, but not know how to drive?
-
Target Redesign →
Beautiful, well played Target.
-
Utilizing The Power Of Recycling In Web Design →
Just yesterday I was working on some comps and thinking to myself how much I recycle design elements from past designs I’ve made, or even from designs that were not approved from the client.
I’m used to recycling code but hadn’t really noticed on how much I rely on recycling design as well. I guess it’s all part of what gives every one of your designs that special touch.
Also, a great help when being stuck with a blank canvas.
-
Getting Started with Wireframes
I love making wireframes, they make my job a whole lot easier, definitely one of the most important elements in my ux toolbox.
What is a wireframe?
On simple terms, a wireframe takes a webpage layout back to the basics, it’s a simple rendering of where the elements and text are placed on a page. By creating a wireframe you make sure you get colors and visuals out of the way and you focus on what really matters: content and user experience.
I won’t get into too much detail on how to make wireframes, you can find lots and lots of information on the matter by just googling around. I highly recommend Fuzzymath’s recent series of posts on the matter, very informative.
What are they good for?
Thinking about elements and layout first is very important, wireframes help you do exactly that. There is no right or wrong way to do a wireframe, just get a piece of paper or fire up your favorite design app and start sketching away. Once you see elements and content on a piece of paper or on your monitor you will start realizing what works and doesn’t and start moving elements around, adding in more, or completely eliminating useless parts. This is the beauty of a wireframe.
Beside from helping you out in your design process, wireframes will also help you to:
- Create a useable layout
- Work as a team to iterate on creating the right interface
- Convey your thoughts, ideas and proposals to your clients
- Focus on information hierarchy
- Get early feedback on your layout or user experience
Wireframes and user interaction
This is where I find wireframes to come most handy, when defining the user interaction of an app. There are certainly a few of cases I can think of where you could simply skip making a wireframe, normally when the layout is very simple or the requirements are very well documented.
On my previous post about UX design, I discussed a few ideas around creating the right UX for your users. Wireframes are a handy tool for that, they allow you to lay out the user interaction, specify user flows and in general see how a user will move around your app or website.
The great thing about this is that you, your team and stakeholders get to see and experience how everything will work - and change it as necessary at a very early stage.
Stuff to keep in mind
When creating a wireframe always consider:
- Only elements and content that are necessary on this page
- What content deserves the most amount of real estate on the page
- The hierarchy of the information (what is more important than what)
- Who will be using this page
- Where will the user go from here
- Make call to actions very clear
Wireframes get you…
- Early feedback from team, stakeholders and users
- A chance to embrace change quickly at an early stage
- A birds eye view of the project
- Piece of mind
- A very solid starting point to create the visual style
Well that’s it, hope you enjoyed reading a bit about wireframes and why I love them so much. I hope this inspires you to sketch and wireframe before you start out your next design. Trust me, wireframing only makes the process way easier.
