Author: Brian Dys

  • Jumping to Chapters Using IDs in Anchor Tags

    Chapters - Anchor Links - Time
    A screenshot of a Time article showing the Chapters in anchor links.

    Here’s what I particularly like about Time articles – the Chapters are neatly lined up on top in anchor links. In case you want to jump from one part of an article to another.

    TearSheet

    The simplest way to implement this is to use the id of the element and put that into the href attribute of your a element.

    For example:

    [code lang=”html” title=”HTML”]
    <!– Activating this link will jump to Chapter Title 1 –>
    <a href="#chapter-title-1">Chapter Title 1</a>

    <!– Chapter Title 1 –>
    <h2 id="chapter-title-1">Chapter Title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    [/code]

    You can see a demo here:

    [codepen_embed height=”424″ theme_id=”1820″ slug_hash=”heoAl” default_tab=”result”]See the Pen heoAl by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

  • C Versus V

    Right now in my career, it seems like C is complacent enough because of the fact that it is being sustained to existence by S. Even with the fact that there is a struggle to stay relevant against a sister competitor, V, innovation and quality in the products that we deliver is so-so. We are departmentalized in the sense that there is no perceived changes and development company-wise. Each team can be very innovative on its own – but on the context of working on actual projects – the old ways, which the product development people are stuck in, tramples it.

    We are stuck in the ways and popularity of CTM during its heydays. Until now, it’s still the old CTM with an increment in number which is 6. It’s like Pilita Corales trying to stay relevant in the 21st century by being simply Pilita.

    But here’s the clincher – C A and PA. Both are innovative products that already hit the market. For the latter, the money put on advertisement is grand – if only they allotted that money to get the PA team in a private beach resort to develop that product – away from S’s Marketing team – the product wouldn’t be as “meh” as it is now.

    I am happy and content with the fact that C, as a company, sets its eye on the long term; is being-business driven – that on the long haul all other companies and products will tire themselves up and become irrelevant while C, in its careful planning and superb strategy manages to live on. Slowly but surely.

    But the key to almost anything is balance. If one has been on the long-term planning for so long, one has to delve into the short-term, too. People – employees to be exact, don’t want to be stuck inside gray walls, gray cubes while waiting for the glory days to come. They must see a leader or a mentor telling them where we are and where we’re going. It might be through a long and winding road – but the leader makes it sure that there are stopovers along the way.

  • In Designing and Creating

    Messenger Pad
    A Messenger Pad 2100 with an iOS 7.1 home screen. Remix by BS

    I dabble in creating a framework in HTML and CSS because I connect how sleek a design is on the outside to its inside and to how good it works.

    Here’s Jony Ive in an interview with Time to ’nuff said it:

    Objects and their manufacture are inseparable. You understand a product if you understand how it’s made.

    ~ Jony Ive, Senior VP of Design at Apple Inc.

  • The Gravity Song

    I’ve watched Gravity and thought that Ryan Stone was only dreaming when she landed on Earth. A couple of days after, I’ve seen The Oscars 2014 and heard Karen O’s The Moon Song.

    I thought it was the theme song of Gravity so I remixed some clips of the movie while the oh-so-dreamy song plays in the background.

    I’m lying on the moon
    My dear, I’ll be there soon
    It’s a quiet and starry place
    Time’s we’re swallowed up in space
    We’re here a million miles away

    There’s things I wish I knew
    There’s no thing I keep from you
    It’s a dark and shiny place
    But with you my dear I’m safe
    And we’re a million miles away

    We’re lying on the moon
    It’s a perfect afternoon
    Your shadow follows me all day
    Making sure that I’m okay
    And we’re a million miles away

    ~ The Moon Song by Karen O

  • Project Folder

    Project Folder
    A picture of a computer monitor displaying the project folders in Windows Explorer.

    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

    For you designers and developers out there, do you have a similar approach? How does your file management system vary from project to project?

  • Trying Out Getty Image’s Embed Feature

    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.

  • Week-links 2: Feb 24 – 28, 2014

    1. Dirty Markup

      http://www.dirtymarkup.com/

      DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code.

    2. Pencil Project

      http://pencil.evolus.vn/

      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.

      Pencil Project

      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.”

  • Traces of Chladni Figures

    Ernst Chladni

    Reading some science articles, I chanced upon Ernst Chladni’s figures/arrays – created by putting sand over a thin metal plate and subjecting it to sound. The study of the visible sound vibrations is called Cymatics.

    Cymatics
    How Chladni Figures are created.

    Tracing Patterns

    I have an inclination to tracing patterns and figures found in movies and old prints. It’s like a refresher in using different tools and techniques in vector manipulation, as well as preservation of the things past.

    Repulsion Pattern
    Loosely based on the dress Catherine Deneuve was wearing in the movie, Repulsion (1965). Directed by Roman Polanski.
    (more…)
  • Graphic Design Playground – Part 1 of 4

    Georgia
    My favorite Beatle, George Harrison in the body of Marilyn Monroe.

    I remember my humble beginnings in Photoshop and didn’t have the files to prove it because my hard drive crashed. Well, it really did and that will be another story.

    The second batch of practice files are still with me though. Not everyday did I experiment on lo-res stock photos and found pictures on the internet. So I could’ve not improved drastically from the first few years to the next.

    Electronic Music Wow

    MTV Music Generator
    I got this gem inside SM Bacoor.

    During the late 90s, armed with an amateurish guitar-playing skill, I got hooked in playing with electronic music using MTV Music Generator in PlayStation 1. And a couple of years after, I upgraded to an early version of Fruity Loops.

    Here’s an example of what I managed to produce in the PlayStation:

    [soundcloud url=”https://api.soundcloud.com/tracks/135683847″ params=”color=ff5500&auto_play=false&hide_related=false&show_artwork=true” width=”100%” height=”166″ iframe=”true” /]

    How I magically got that in MP3 format? I hooked a PC mic in front of the TV speaker while PlayStation is playing the song.

    The whole point of this is that I was so excited to design my own (imaginary) album covers. I consider these designs part of my practice files – created out of pure enjoyment.

    Evil Twin
    Evil Twin
    Twirler
    Twirler
    Picnic Wasted
    Picnic Wasted
    Escapade
    Escapade
    Witches of the Deep
    Witches
    Void
    Void
    Tiger
    Tiger
    Cross and Die
    Cross and Die
    Coaty Fur
    Coaty Fur
    Our Fish
    Our Fish
    Alarma
    Alarma
    One, Two, Three
    One, Two, Three
    None
    None
    Tricky Resemblance
    Tricky
    Complete
    Complete
    Frost Eat
    Frost Eat
    Leoscalp
    Leoscalp
    Microbes
    Microbes
    Sunny Black
    Sunny Black
    Chocolate 100%
    Chocolate 100%

    I followed this up with more “serious” compositions and with that came more “serious” album covers.

    Check back soon for Part 2.


    I leave you with a saying by the great Confusious:

    A true designer only uses solar flare for irony.

    Confusious
  • Metro Manila Roadway Tablet – Launched

    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.

    MMRoadway.com Launch
    Chairman Francis Tolentino launching the website in front of summit participants.

    Our website’s purpose is to inform the general public (especially those living in Metro Manila) of each project’s status and important information.

    Metro Manila Roadway Tablet
    A screenshot of Metro Manila Roadway Tablet’s homepage.

    (more…)