👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Categories
0
Comment
Upon archiving stuff in my old hard drive, I encountered my equally old (circa 2004) template of Project Folder. Over those years in designing websites, I’ve personally developed a system for organizing project files.
Project Folder v1.0
This particular Project Folder was structured as such:
- Project Folder: renamed to the [Project Name]
- Archive: screenshots, document files, research resources, miscellany
- HTML: the front-end stuff like HTML, CSS, media assets
- Source: the source files like Photoshop, Illustrator files
- Templates: image mock-ups in JPEG, PNG
Fast forward to 2008 – I was at the Chikka office for a Senior UI Designer interview. One of the questions I was asked was how I organized my design and development files or if I did. I proudly discussed Project Folder v1.0 since I developed it myself.
Project Folder v2.0
When I joined the team at Chikka, I learned to use a similar system (which was used by developers) and from what I remember, it was patterned after repositories.
- Project Folder: renamed to the [Project Name]
- comps: contains wireframes, studies, mock-ups, design artifacts, and any file ready to be sent out for approval
- docs: contains documents from product developers such as Business Rules, Use Cases, screenshots, pegs, font files
- dev: contains HTML/CSS/JS files
- branches: contains the temporary/experimental development files
- trunk: contains the latest version of the development files
- raw: contains the source files of artworks, graphics (PSD, AI, PNG)
This approach was way better and more appropriate in a web development setting so I also adapted it to my freelance work.
Shortly after, mobile became a “thing”. Suddenly, from a couple of platforms, Pandora’s box was wide open. Our team needed to adapt – first, in the file management level.
Project Folder v3.0
The significant change I made was simply an addition of another folder to categorize the platform type the project fell under. For example:
- Project Folder
- Android
- comps
- docs
- dev
- raw
- iPhone
- Web
- Android
For you designers and developers out there, do you have a similar approach? How does your file management system vary from project to project?
Here’s Beady Eye lead, Liam Gallagher:
You see the “</>” icon below the image? That’s the embed action which you will see along with all (I assume) images in Getty’s website.
Getty Images is leading the way in creating a more visual world. Our new embed feature makes it easy, legal, and free for anybody to share our images on websites, blogs, and social media platforms.
It’s OK to have additional information (at the bottom) as long as Flickr keeps it neat where most of the images are my own.
Days of erasing out watermarks are so long ago.
-
Dirty Markup
DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code.
-
Pencil Project
Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms.
Platform:
- Mac
- Windows
For wireframe-creation. It can also create prototypes by linking different pages of your project. So you can do something like “activate this and that will happen.”
After weeks of design planning and working late nights, Metro Manila Roadway Tablet has launched during the Metro Manila Traffic Management Summit on February 14, 2014.
Our website’s purpose is to inform the general public (especially those living in Metro Manila) of each project’s status and important information.
-
Trello
Trello is the fastest, easiest way to organize anything, from your day-to-day work, to a favorite side project, to your greatest life plans.
A screenshot of Trello homepage. I’m trying this out for short-range project management – to-do lists and assignments – Trello answers all that.
-
Scout
http://mhs.github.io/scout-app/
Scout is a cross-platform app that delivers the power of Sass & Compass into the hands of web designers.
A screenshot of Scout homepage. Here’s something I’ll also be trying along with Brackets – Scout. It’s an app that will watch for Compass and Sass files in a folder.
-
Brackets
Brackets is an open source code editor for web designers and front-end developers.
A screenshot of Brackets homepage. I’m looking for a replacement for Adobe Dreamweaver for my front-end design work. I’ll be checking out Brackets and Sass.
Categories
International Red Design Studio has partnered with MMDA to provide you with the latest information on current and upcoming Metro Manila roadway constructions.
We’re talking about interconnected infrastructures that will be worth the hurly burly traffic jam the constructions will cause.
So to all passengers out there – whether you’re a commuter or a backseat driver – sit back, relax, and enjoy the ride (to the drivers as well).
Say goodbye to yesterday
Hit the gas there ain’t no brakes on this lost highway
~ Lost Highway by Bon Jovi
By the way, Bon Jovi’s Lost Highway is up there with the logos because the album’s accompanying me tonight as I work on the project.
I’ll keep you posted once the website has launched.