A lot of designers and developers still use Photoshop to create their ideas and push pixels around before creating the code. It’s a lot easier to visualize how things will work together when you can move things around and resize them manually. Once you perfect the layout, then you can take it to the coding stage. I put together a collection of UI mockups that you’ll find useful.
Having a collection of UI mockups and files will enable you to pull from them when you need them. You can mix and match items, borrowing ideas and pre-made elements to get an idea of how they’ll fit together. Often, I’ll look at how things fit together in Photoshop. They always need some tweaking. I like having that flexibility, because I am a more visual person. I do understand the coding side of the web, especially since I build my ow websites, and website for clients. My focus is mainly speed, since I am a one man army. To keep up with design teams and their level of production, I can’t waste time battling my ego and working in code only. Let’s take a look at 4 great UI mockups I found this week.
Music has so many genres and divisions that a good UI mockup can be a challenge. You have to account for the hierarchy of the content and how it breaks down into smaller categories. This mockup does a great job of that.
Movies and shows can be tough to organize, but the square shots of each show has an iTunes feel that seems familiar. I like how the admin or user area is tucked out of the way.
Video sites are always tough. Sites like Comedy Central, who would obviously have tons of video, will need to have some sort o grid setup to keep video lists organized. I like the vertical menu of the side. it works well with the rest of the layout.
This is a sleek, simple mockup of a code editor concept. I like how different languages are color coded to keep things organized visually.
Which one of these free UI Mockups is your favorite? Conceptually, each one of these are well organized. Each designer has done an outstanding job of creating a simple, effective mockup that looks professional. If you download and use their free files, you should appreciate their projects and help promote their work.