Efeitos de Luz em Tipografia

DSC_0639

Com este trabalho pretendeu-se fazer experiências exploratórias com tipografia, procurando alargar o seu horizonte de aplicação, utilizando materiais de suporte menos tradicionais conjugados com propriedades físicas dos raios luminosos.

Pretendendo aproveitar os efeitos da luz em materiais transparentes ou translúcidos, considerei interessante utilizar fontes tipográficas executadas nesses materiais e fazendo-as atravessar por raios luminosos.

Propus-me assim criar candeeiros (para funcionar como luzes de presença ou de ambiente), baseados em fontes tipográficas executadas em placas de acrílico e atravessadas por raios luminosos emitidos por LED (light-emitting diode).

“… we are surrounded by so much typographic matter that we probably don’t really notice that we are looking at things that have been designed; even though these things have often been designed in great detail.” [5] Harkins, 2010

(mais…)

ModuLetter | Tipografia modular reactiva e interactiva

Como resposta ao repto que nos foi lançado este semestre, apresento o Projecto ModuLetter, um sistema que faz a ponte entre a tipografia tradicional em letterpress e as novas tecnologias – tencionando recorrer ao uso de processos de fabricação digital e de sensores motores e software dedicado na sua produção  implementação – e coloca ao dispor de um público mais vasto a prática da tipografia modular.

Este projecto foi desenvolvido com vista à criação de caracteres com módulos geométricos e a posterior tintagem destes últimos em separado, permitindo assim a produção de provas em policromia, com um carácter que pode oscilar entre o totalmente aleatório e o rigorosamente controlado.

A sua filosofia, modular em todas as suas vertentes, vem na senda de outros projectos mais genéricos e lúdicos (mas não menos educativos), como sejam os Tinkerbots ou os cubos MOSS e Cubelets da Modular Robotics, mas inspira-se ainda em projectos mais “sérios” como sejam littleBits, estes últimos mais vocacionados para a criação de máquinas mais complexas e standardizadas.

20150321_063452394_iOS

Maquete de Bloco-matriz e módulos, escala 1:1

20150321_064039974_iOS

Maquete de Bloco-matriz e módulos, escala 1:1, com bloco de impressão para referência

Maquete de Bloco-matriz e módulos

Maquete de Bloco-matriz e módulos, escala 1:1, com bloco de impressão para referência

Módulo Accionador ModuLetter

Módulo Accionador ModuLetter, com mecanismo de elevação em vista de secção

Kallos graphein bacterium

Kallos graphein bacterium é um projecto exploratório em caligrafia, onde me propus a criar formas caligráficas usando bactérias e fungos, registando o seu desenvolvimento e criando um desenho de letra final. Este projecto explora formas alternativas de representação tipográfica e do processo de escrita em si.

Projecto completo

634a34109c15fe6eb6ccc1a22b9eb0e3 5a9cec2df23fb2b2c2f87137d211e8fc 67b1e993bc9e3fb54c471b9fed76305c c597473bcf27db56fed7a4426836ab3a

Instructable – Poster with conductive ink and LEDs

Make your own Galaxy on a paper…

posterinplace

I came across conductive ink in my research and as a Design student I started to question its use on my projects. I envisioned a poster with LEDs and typography where light would be an illustration of the text. For this project I chose a Carl Sagan’s text where the LEDs evoke a galaxy.

The complexity of this project would be simplified if the circuit was silk printed but this instructable is perfect if you want to do it yourself at home. Feel free to simplify and adjust these steps for your own poster, card or anything your imagination may lead you to.

01 copy

1. List of Materials: tape pencil triangle ruler cutting mat x-acto knife paper stock glue LEDs conductive ink (bare conductive) pin coin battery pin (pliers)

02 copy

2. Print your text or image

3 montado

3. Mark where you want your LEDs, pin them, both points, so that you can insert the LED perfectly in those two holes. Bear in mind: – because of polarity, LEDs have to always be in the same direction, I decided that the positive was going to be facing the top and the negative facing the bottom of the poster – if you have two LEDs near each other horizontally, they have to be exactly in the same line, use a ruler to help you in this step

04 copy04a copy

4. On the back of the paper start drawing your circuit: On the right side I drew the positive, on the left the negative. Join the holes with the lines, the upper holes with the right vertical line, and the bottom holes with the left vertical line.

05 copy

5. Cover the circuit with conductive ink. Be careful, the ink shouldn’t touch the other lines or it will cause a short circuit. The ink takes a long time to dry, depending on temperature and air moisture. Wait a few hours, or even a day, to start the next step.

06 copy06a copy

6. Fix your pin battery in a paper and then glue the paper in the bottom part of the poster, where you have no conductive ink. The positive side of the battery must be placed to the right and vice versa.

07 copy

7. Draw the rest of the circuit with conductive ink covering the positive and the negative, save a gap for your switch. Wait until the ink is dry.

08 copy

8. Now make your switch. Cut two rectangles with the same width and with the bigger one make a ring and then fold it.

09 montado

09. Use tape to help you in this step, you’re going to find out where you have to place the stoppers for your switch. Insert the first stopper inside the paper ring, on the bottom, place it on the poster aligned at the bottom, that will be the final position of the stopper (OFF position). To find out the position of the upper stopper, you have to place that stopper inside the ring in the upper part, push the switch and that will be the ON position.

10 copy10a copy

10. Mark with a pencil where it all must be glued and then turn the switch facing you and then mark the ON position. You have to draw conductive ink to close the circuit when the switch is pulled down. Wait until the ink is dry.

11 copy11a copy

11. Glue everything in it’s right place and reinforce the switch with two stripes of paper.

12 copy

12. The back of your poster should look like this.

13 copy

13. On the front of the poster, start to place the LEDs, each LED should have the long wire in the upright position and the other wire down.

14 copy14a copy

14. On the back, you’re going to fold the LEDs so that they are in contact with the conductive ink (a pliers might help you). Once again bear in mind the polarity, the lines that come from the right are positive, the ones that come from the left are negative. To place the LEDs use tape.

Repeat steps 13 and 14 with all your LEDs.

15 copy

15. Now you just have to make sure the LEDs will stay in place. Using conductive ink, “glue” the positive part of the led to the positive line of the circuit, and the negative part of the LED to the negative line. Repeat this step with all the LEDs. Wait until the ink is dry.

16a copy

16. Your poster with conductive ink and LEDs is ready! Enjoy your galaxy on a paper…

// Related References:
how to work with conductive ink “bare conductive”- bareconductive.com
portuguese online store selling electronic components – mauser.pt
online store and Lisbon-based studio focusing on creative electronics – ledsandchips.com

// Published in:
instructables.com
bareconductive.com

Referências para o trabalho final

Exemplos de formatos para publicação de artigos para conferências e de instruções online:

Encontro de Tipografia: Modelo de artigo (Sugestão de área temática: Tipografia e tecnologias. Artigo até 3000 palavras, referências em estilo APA) | Modelo de poster

CHI extended abstract format (máx. 4 páginas, cerca de 400 a 500 palavras por página, ou seja máximo 2000 palavras).

Referência para publicações ACM CHI (disponíveis online para download gratuito na FBAUL)

Exemplo de publicação com o formato extended abstract (CHI): na biblioteca ACM (ou TEI11_ArtExploration_HugATree).

Instructables

Make:

Interfaces de utilizador | Aula prática

Linguagens declarativas para o desenho de interfaces
http://code.google.com/p/visage/
http://qt-project.org/doc/qt-5/qmlapplications.html
http://developer.android.com/guide/topics/ui/declaring-layout.html
http://nucleic.github.io/enaml/docs/get_started/introduction.html

Ferramentas visuais
http://qt-project.org/doc/qt-4.8/designer-manual.html
https://developer.android.com/sdk/installing/studio-layout.html
https://www.polymer-project.org/tools/designer/

Separação de conteudo, apresentação e comportamento
http://en.wikipedia.org/wiki/Separation_of_presentation_and_content
http://alistapart.com/article/behavioralseparation

HTML5
http://diveintohtml5.info
http://developer.mozilla.org
http://www.webplatform.org
http://learnlayout.com

Frameworks CSS
http://getskeleton.com

Ink
http://ink.sapo.pt

Web components
http://polymer-project.org


Tema e sessões orientadas por Pedro Ângelo (dataflower.org)

Ajudas – HTML / CSS e Web Fonts

Alguns dos links falados na aula de hoje!
http://diveintohtml5.info/ – livro sobre HTML5
http://www.w3schools.com/ – Tutoriais e ajuda de HTML / CSS e outros
http://learnlayout.com/ – Tutoriais de CSS
http://www.webplatform.org/ – Tutoriais e ajuda de HTML / CSS
https://developer.mozilla.org/en-US/docs/Web/CSS – Tutoriais e ajuda de CSS (este site tem mais linguagens)
http://foundation.zurb.com/ – Frameworks de HTML / CSS
http://getbootstrap.com/ – Frameworks de HTML / CSS
http://ink.sapo.pt/ – Frameworks de HTML / CSS

Se quiserem aprender HTML / CSS, aconselho estes sites:
http://www.codecademy.com/ – ensina (gratuitamente) a fazer HTML / CSS, step-by-step
(também tem outras linguagens, para quem estiver interessado!)
http://learn.shayhowe.com/html-css/ –  Tutoriais e ajuda de HTML / CSS

Outros links que podem ter interesse:
http://codepen.io/ – algumas coisas que podemos fazer (para além de sites =P)
https://edgewebfonts.adobe.com/ – web fonts gratuitas
http://www.google.com/fonts – web fonts gratuitas

Boas experiências!

Interfaces de utilizador

Tema e sessões orientadas por Pedro Ângelo (dataflower.org)

 

Early Times

Vannevar Bush – “As We May Think”
http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/

Ivan Sutherland – “Sketchpad”
http://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf

https://www.youtube.com/watch?v=57wj8diYpgY

T.O. Ellis – Grail Project
http://www.rand.org/content/dam/rand/pubs/research_memoranda/2005/RM5999.pdf
https://www.youtube.com/watch?v=QQhVQ1UG6aM

Douglas Engelbart – NLS (The Mother of All Demos)
http://web.stanford.edu/dept/SUL/library/extra4/sloan/mousesite/Archive/ResearchCenter1968/ResearchCenter1968.html
https://www.youtube.com/watch?v=yJDv-zdhzMY

Alan Kay – Xerox PARC (Alto, Star, Smalltalk, WIMP, Dynabook)
http://gagne.homedns.org/~tgagne/contrib/EarlyHistoryST.html
https://www.youtube.com/watch?v=kzDpfk8YhlE

Bruce Tognazzini – Starfire
http://asktog.com/starfire/
https://www.youtube.com/watch?v=w9OKcKisUrY

(Bonus) Bret Victor – The Future of Programming
https://www.youtube.com/watch?v=8pTEmbeENF4

Modern Times

http://toastytech.com/guis/guitimeline.html

Future

Tangible Interfaces
http://web.media.mit.edu/~anjchang/ti01/ishii-chi97-tangbits.pdf

https://www.youtube.com/watch?v=Q2OJCFDoXNQ

https://www.youtube.com/watch?v=e6ih9FLQvJo
http://tangible.media.mit.edu/project/inform/

Mobile-first UI
http://thenextweb.com/dd/2014/03/19/history-flat-design-efficiency-minimalism-made-digital-world-flat/

http://www.google.com/design/spec/material-design/introduction.html

http://ui-patterns.com

Direct Manipulation
http://worrydream.com

https://www.youtube.com/watch?v=eBb3ZTyRcWQ

Whole Body Interaction
http://newsroom.cisco.com/feature/1275146/Beyond-the-Touchscreen-The-Human-Body-as-User-Interface_2

https://www.youtube.com/watch?v=1jzHcXZFJMw

Augmented Reality
http://owocki.com/google-glass-promise-of-augmented-reality/

https://www.youtube.com/watch?v=v1uyQZNg2vE

Virtual Reality
https://cardboard.withgoogle.com

http://www.durovis.com/opendive-howto.html

https://www.youtube.com/watch?v=JmnjvCR-lS4

Design Fiction
http://www.scifiinterfaces.com

http://coleran.com

UI Typography?

“functional” typography
http://en.wikipedia.org/wiki/OCR-A_font

http://hivelogic.com/articles/top-10-programming-fonts

http://dwarffortresswiki.org/Tileset_repository

http://fortawesome.github.io/Font-Awesome/

“applied” typography
http://dl.acm.org/citation.cfm?id=287825

http://webtypography.net